Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

repeat css background image a set number of times

Tags:

css

repeat

is there a way to set the number of times a background image repeats with css?

like image 742
Moudy Avatar asked Jun 01 '10 12:06

Moudy


People also ask

What sets how a background image will be repeated?

The background-repeat property sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally. Tip: The background image is placed according to the background-position property.

What CSS value will keep a background image from repeating itself?

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial| inherit; Default Value: Its default value is initial. Property Values: repeat: This property is used to repeat the background image both horizontally and vertically.

How do I repeat a background image in CSS vertically?

The background-repeat property in CSS is used to repeat the background image both horizontally and vertically. It also decides whether the background-image will be repeated or not. Background-repeat: This property is used to repeat the background image both horizontally and vertically.


1 Answers

An ugly hack could be inserting multiple times —statically— the same image (using multiple backgrounds):

E.g. To repeat horizontally an image (80x80) three times:

background-image: url('bg_texture.png'),                    url('bg_texture.png'),                   url('bg_texture.png'); background-repeat: no-repeat,                     no-repeat,                    no-repeat; background-position: 0 top,                       80px top,                      160px top; 

Beware: not working on IE under 9 version (source).

like image 125
franzlorenzon Avatar answered Oct 04 '22 11:10

franzlorenzon