#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    54
    Rep Power
    2

    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; 
    }
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    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.

IMN logo majestic logo threadwatch logo seochat tools logo