Search code examples
cssmedia-queries

Modular height div (multiples of 100px) in pure CSS

I have a div with a repeating background. The background image is 50px x 50px.

Because the repeating image is 50px high, I would like the div height to be in MULTIPLES OF 50. This will assure that the background image is repeated, but not cut-off by the edge of the div.

  1. Is there a pure CSS way to do this without media queries?
  2. Is there a way to do this with media Queries?
  3. I know it's possible with JavaScript, but I wold rather not have to use it (there are lots of objects with this type of styling, and would rather not have to $.each() them all).
Solution

  • The only way to get close to this with currently implemented CSS is border-image, but it wouldn't work exactly as you want. Instead of making the element size a multiple of 50px, you would instead scale the 50px components so that they fit the element.

    It would work something like this: make a 150px by 150px image out of nine tiles of your existing background image, then specify a rule something like this:

    border-image: url(bg.png) 50 round fill;

    The round keyword means the middle slices of the image will repeat and stretch as appropriate to fit the element. This would only really work at all if you set minimum dimensions on the element to at least 150px square. On the practicalities front, support is a bit patchy, I don't think any browsers have implemented the current spec yet. You can leave off the fill keyword when using the vendor specific properties.

    Other than that, the CSS3 Line Grid module is set to allow the sizing of elements in multiples of line height, but implementations are still a long way off for that.