positioning a background image, so it fits on all screens

Discussion in 'CSS' started by moodey-aimee, May 14, 2010.

  1. #1
    how do you get a background image of your site. to Spread across a screen without resizing it in photoshop.

    Like it looks ok on my laptop. but on others screens, someone says it has a bit of black at the side. how do i fix this.

    Thanks

    the code for my Page is;

    body {background-color: #000000;
    	  background-image:url(body-background.jpg); background-repeat:no-repeat;
    	  font-family: arial, verdana;}
    Code (markup):
     
    moodey-aimee, May 14, 2010 IP
  2. bavington

    bavington Peon

    Messages:
    74
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi Aimee,

    I don't think there is a way to do this with CSS 2. I understand what you want to achieve, but it isn't that straight forward. What I would do is make the background bigger larger, perhaps by adding a bleed, and positioning it in the center of the page by adding the following attribute:

    background-position:middle;

    You can see an example of this kind of background position on a website i recently designed for http://www.houstons-grill.co.uk/ In my example, the background JPG is bigger than anyone's screen resolution, and because it is centrally positioned, you only see as much as your browser allows. Hope that Makes sense.
     
    bavington, May 14, 2010 IP