December 5th, 2012, 07:07 PM
How to stop background image from repeating and stay centered?
I am making a very simple landing page. I just want to make a background by width 970px and height 720px. (Seems a recommended size when I looked around). It is a rounded square so it will not cover entire background and uncovered parts will be white.
But when I put in the codes, the image repeats and the sides plus bottoms has repeated image of that background image (the rounded square). Alignment also doesn't seem center. When I input no repeat, the image totally disappears giving me a white background. Can help point out what I am doing wrong? Thank you.
December 6th, 2012, 05:10 AM
You don't need all those separate background elements, just use
Also, if it is just a rounded corner box then you can do all you need in CSS3 without having to use an image (though doesn't work in IE8 and below) by using a background color and border-radius, for example (change the px value to your requirements)
background: url(images/bg_body.png) no-repeat fixed center top #e4e4e4;
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
Last edited by simplypixie; December 6th, 2012 at 06:23 AM.