All geek questions in one place

CSS: Give a div that is a multiple of a number?

The div has a glowing background. The height of this div will depend on its contents. I need the div to stretch over multiple values ​​of the background image.

For example, the background is a 64x64 image. So, if the height of the div is increasing, I want to do this with 64px steps.

Is this possible with CSS? I did not find potential customers using Google. Thank you for your time!

+6
source share
3 answers

As far as I know, this cannot be done in CSS, but you can probably solve it using javascript. If you have access to jQuery:

$(function() { $div = $('#the_div_id'); var remainder = $div.height() % 64; var newHeight = $div.height() + (64-remainder); $div.css('height', newHeight); });
+6
source

One solution (depending on your specific case) could be to use the new CSS background-size property. I left the declarations separate for clarity:

 div.yourDiv { background-image: url('yourImage.jpg'); background-repeat: repeat; background-size: contain; }

Then, regardless of your div size, your image will be completely broken without being cropped. Older browsers will simply get a tiled image, which may or may not be a problem.

+4
source

What is the content of the div? It seems that instead of setting the div size to the correct value, you need to pay attention to the content - this post , the details are some pretty simple methods for implementing a vertical rhythm that should work (i.e. using a line height of 64 pixels)

0
source

Source: https://habr.com/ru/post/908148/

More articles:


All Articles