can you create space between background image repeats?

css background-image space background-repeat
gcoulby picture gcoulby · Mar 4, 2013 · Viewed 9.7k times · Source

Is it possible to repeat a background image, but specify a number of pixels before the next repeat starts.

i.e. background: url(img.png) [after 40px] repeat-x;

I don't want to add empty space to the image.

Answer

Sahil Popli picture Sahil Popli · Mar 4, 2013 
background-repeat: space;
background-repeat: round; // round(520 / 100) = round(5.2) = 5

The browser will render five images in the space but adjust the image width to 104px (520px / 5). The image is made wider to fit the container. Full details here or read Background Size property

Related questions

How to apply a CSS filter to a background image

I have a JPEG file that I'm using as a background image for a search page, and I'm using CSS to set it because I'm working within Backbone.js contexts: background-image: url("whatever.jpg"); I want to apply a CSS 3 …

Read More
CSS Display an Image Resized and Cropped

I want to show an image from an URL with a certain width and height even if it has a different size ratio. So I want to resize (maintaining the ratio) and then cut the image to the size I …

Read More
How do I combine a background-image and CSS3 gradient on the same element?

How do I use CSS3 gradients for my background-color and then apply a background-image to apply some sort of light transparent texture?

Read More