Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css background-repeat x and y

Tags:

html

css

Is it possible to use with small picture for the background div to repeat x and y together? See example thanks.

like image 460
israel love php Avatar asked Apr 01 '12 08:04

israel love php


People also ask

What is the used of background-repeat repeat-Y?

repeat-y: This property is used to set the background image repeated only vertically. Example: HTML.

What is background-repeat repeat-X?

repeat-x. The value repeat-x ensures that the background-image is repeated only along the x axis (that is, the horizontal axis in both directions—left and right) until the element's background is fully covered along that axis.

What are the 4 options on background-repeat?

1, the background-repeat property had four options: no-repeat , repeat , repeat-x and repeat-y . While these are undoubtedly useful, they don't permit finer control over the repeating process and tiles will be clipped if they don't fit the container an exact number of times.


3 Answers

background-repeat: repeat;

http://www.w3schools.com/cssref/pr_background-repeat.asp:

repeat - The background image will be repeated both vertically and horizontally. This is default

Example: http://jsfiddle.net/p2vjf/6/

like image 80
MarcinJuraszek Avatar answered Oct 19 '22 19:10

MarcinJuraszek


Yes, just remove both, and the default value background-repeat: repeat; kicks in:

http://jsfiddle.net/Guffa/p2vjf/7/

like image 5
Guffa Avatar answered Oct 19 '22 19:10

Guffa


use this....

float: left;
width: 100%;
background: url(../images/img01.jpg) left top repeat;
height: 500px;  //set the height to which you want to repeat
like image 2
Paz Avatar answered Oct 19 '22 21:10

Paz