How to repeat an image vertically & horizontally?
Question
Note : repeat , repeat-x , repeat-y All of them don't work.
So I have the following HTML & CSS code. I tried many ways but couldn't get to work. The image I want to repeat is XYZ.png.
<html>
<head>
<title>IOP</title>
<style>
body > header {
background : url("a.png") repeat-x scroll 0 0 transparent;
box-shadow : 0 1px 4px rgba(0, 0, 0, 0.2);
width : 100%
position : relative;
z-index : 10;
height: 57px; }
#MAN {
height:100%;
padding : 30px 0 25px;
background: url("XYZ.png") repeat ;
}
</style>
</head>
<body>
<header></header>
<div id="man">
</div>
</body>
</html>
I even tried height:100% but that gave me a scroll bar.
Regards,
Netizen
3 answers
solution1
1 ACCPTED 2011-12-31 18:06:38
Try this:
<html>
<head>
<title>IOP</title>
<style>
body > header {
background : url("a.png") repeat-x scroll 0 0 transparent;
box-shadow : 0 1px 4px rgba(0, 0, 0, 0.2);
width : 100%
position : relative;
z-index : 10;
height: 57px; }
#MAN {
height:500px;
width: 500px;
padding : 30px 0 25px;
background: url("XYZ.png") repeat ;
}
</style>
</head>
<body>
<header></header>
<div id="man">
</div>
</body>
</html>
Add width and height to #MAN in pixels. Usualy height and width 100% will take size of its parrent. Try using wrapper div that will have widht 960px, and then inside wrapper every element with width 100% will take 960px width. This is joust from my head didnt tested. Hope its ok. I havent wrote any html css for months now :(
solution2
0 2011-12-31 18:00:55
Allready tried if it's case-sensitive?
<html>
<head>
<title>IOP</title>
<style type="text/css">
body > header {
background : url("a.png") repeat-x scroll 0 0 transparent;
box-shadow : 0 1px 4px rgba(0, 0, 0, 0.2);
width : 100%
position : relative;
z-index : 10;
height: 57px;
}
/* case sensitive? ----> */ #man {
height:100%;
padding : 30px 0 25px;
background: url("XYZ.png") repeat ;
}
</style>
</head>
<body>
<header></header>
<div id="man">
</div>
</body>
</html>
solution3
0 2011-12-31 18:05:49
Why not just do:
body { background: url(XYZ.png); }
See: http://jsfiddle.net/Wexcode/Chb33/
Edit: You might also not be referencing your image properly. See my comment below.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.