Jump to content

background image shifts to left


nhaskins
 Share

Recommended Posts

I've been having an issue with the site I'm designing. I didn't know what was wrong so I tried process of elimination and striped the site of everything I could, but the background image is still always shifted to the left when the screen size is 800x600 or less (except in IE). You can see this in action at http://oasisoflove.ca/teaching/test2.php the Code is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">  <head>    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />    <title>      Oasis of Love - Test    </title>    <style type="text/css" title="currentStyle" media="screen">/*<![CDATA[*/    @import "../css/oasistest2.css";    /*]]>*/    </style>  </head>  <body>    <div>      ©2008 Oasis of Love Miracle Center. All rights reserved.    </div>  </body></html>

and the css

body {	min-width:980px;	background:url(bgo.png) repeat-y top center;	}

the background image (bgo.png) is 908x95px. The full site is at http://oasisoflove.ca. I tried removing the min-width property thinking that maybe IE worked because it didn't understand it, but that didn't help. Any ideas??

Link to comment
Share on other sites

have u tried changing the size of the min-width or instead of using pixel values try a percentage value
I changed min-width to 1000px, 900px, and 100%. 1000px added more space on each side (shocker :) ) but the others made no difference. On the full site I have a header image 980px wide so anything bellow that won't make a difference (and maybe the property is redundant for me?).
Link to comment
Share on other sites

The only thing that's going to stay constant when you lower the width of the page to that extteme with that size of an image is the BG in the div. So I would recommend splitting the background image into two images. Have the part you absolutely don't want moving "off-screen" into the div's background and leave the solid color tan part in the background of the body element. That should solve your problem.

Link to comment
Share on other sites

Hey, I could be way out but maybe have a look at the center declaration on the background image.I think what might be happening is that you've told the background image to appear in the center of the page so when you shrink the page, it moves over as far as it can to stay in what it perceives to be in the center if that makes sense. Like I said, I could be miles out but try working on that and see what happens.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...