How to stop background image from repeating and stay centered?

Dev Shed Forums Sponsor:

December 5th, 2012, 06:07 PM

keshk

Contributing User

Join Date: Nov 2012

Posts: 36

Time spent in forums: 14 h 56 m 39 sec
Reputation Power: 1

How to stop background image from repeating and stay centered?

Hi,

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.

Code:

body { 
background-image:url(images/bg_body.png); 
background-repeat:repeat-none; 
background-color:#e4e4e4; 
background-attachment:fixed; 
background-position:top; 
}

December 6th, 2012, 04:10 AM

simplypixie

Contributing User

Join Date: Aug 2012

Posts: 104

Time spent in forums: 18 h 33 m 57 sec
Reputation Power: 11

You don't need all those separate background elements, just use

Code:

body {
  background: url(images/bg_body.png) no-repeat fixed center top #e4e4e4;
}

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)

Code:

body {
  background: #e4e4e4;
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  border-radius: 10px; /* CSS3 */
}

Last edited by simplypixie : December 6th, 2012 at 05:23 AM.

Viewing: Dev Shed Forums > Web Design > CSS Help > How to stop background image from repeating and stay centered?

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump