background image duplicating?
i made a website for a client and the background image seems to be duplicating itself. why does it do that and how do i stop it.
Other Info:
the website is located at www.wedderburnebooks.com
Update:thank you SOOOOO muck.. but there is another issue. the image is not over the whole screen. is there a way to fix that?
More Questions From This User See All
Answers & Comments
Verified answer
Background Image Code:
For the body tag example:
body {
width: XXpx;
height: YYpx;
margin: 0 auto;
background: #fff url(image_name.jpg) no-repeat center scroll;
}
That is the proper CSS code for a non-tiled image where the contents scroll with the background image. Change "#fff" to preferred bg color. Change "scroll" to "fixed" if you want page contents to scroll over bg image. Be sure to set proper width/height to provide minimum page size to display bg image. Put the CSS on an external CSS file. If using embedded CSS, then place CSS between the style tags and place those style tags between the head tags of the page.
For a tiled image, change to:
body {
width: XXpx;
height: YYpx;
margin: 0 auto;
background: #fff url(image_name.jpg) repeat top left scroll;
}
Put that CSS on an external CSS file if you have more than one page. Put the CSS between the style tags and place them between the head tags if using it on one page. Style another tag other than the body tag if you are using a div wrap container. Should you want the contents of page to scroll over the background image, change "scroll" to "fixed".
Inline CSS example: <body style="width: 960px; margin: 0 auto; background: url(image.gif) no-repeat center fixed;">
Inline CSS example: <body style="width: 960px; margin: 0 auto; background: url(image.jpg) no-repeat center scroll;">
Ron
The background is normal set to repeat. To prevent it from repeating add this to CSS:
body {
background: url(image.jpg) top left NO-REPEAT;
}
Add no-repeat and it will prevent the background from repeating itself. Opps I left out the colon after background.
Edit:
In that case, you have to use CSS3 technique or other CSS tricks.
CSS3, add this to CSS stylesheet:
body {
background: #000 url(Images/websitebg.png) top center fixed no-repeat;
background-size: cover; //this will cover the whole screen
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
}