How do I get Background Image to stop centering with Browser width? - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

How do I get Background Image to stop centering with Browser width?

Dref

9:41 pm on Feb 1, 2010 (gmt 0)

10+ Year Member

Hi,

I'm trying to add a background image that "locks" on to the top and sides of my main site's design elements. It works fine except when I shrink my browser window to smaller than the width of the site. When I do that, the background image "moves" as it looks like it is continually re-centering. I've played around with the CSS attributes quite a bit with no luck, and I'd like to do this without having to divvy the background image into slices and placing it in the #wrapper. Anyone know of a quick fix?

Here is a link to the page: <snip>

and the relevant CSS declarations:

body {
/*background: #e6e6e6;*/
background-image:url('http://www.example.com/wp-content/themes/channel/images/MuftahBackground.jpg');
background-color: #f7f7f7;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top;

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
}

#wrapper {
background: #fff;

width: 940px;
margin: 0px auto;
position: relative;
left: 0px;
top: 112px;

}

Thanks!

[edited by: eelixduppy at 10:53 pm (utc) on Feb. 1, 2010]
[edit reason] no URLs, please [/edit]

rocknbil

3:33 am on Feb 2, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Welcome aboard Dref, try this.

body {
background: #f7f7f7 url(/wp-content/themes/channel/images/MuftahBackground.jpg) top left no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
}

Think it might be the scroll; make sure you're using a full doctype. Note the full URL or quotes are not required, / means "start at the domain root," although those are unrelated.

Dref

3:44 pm on Feb 2, 2010 (gmt 0)

10+ Year Member

Hi rockinbil, thanks for the cleaned up code and quick reply.

I guess the problem with the "top left" declaration is that I need the background image to move from left to right with the site as you stretch the browser window open. Using "top" instead of "top left" accomplishes this, but when I shrink the browser window down to smaller than the width of the site, the background image moves with it, instead of staying pinned to the left like the rest of the site. Any way to fix this?

Here is the doctype I am using: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Thanks!

rocknbil

7:26 pm on Feb 2, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

You can just remove "left" from the shorthand, did you try that? I'm not sure, check the spec, but I **think** center is the attribute to replace it with (I never do it that way.)

I need the background image to move from left to right with the site as you stretch the browser window open.

Then in the original post,

... shrink my browser window to smaller than the width of the site. When I do that, the background image "moves" as it looks like it is continually re-centering.

I don't know how you'd get both, centering it with resize but not centering it? Or did I mis-read, and continually re-centering is desired behavior?

Sounds like it needs to go in a div:

#main {
background: url(/wherever/img.jpg) top center no-repeat;
width:95%;
min-width:800px;
}

I don't want to get off topic, but your doctype is what's called a "half doctype" (if that's all of it, minus the closing >.) This puts the document in Quirks mode as opposed to Standards Compliance Mode. This will present some cross browser challenges. When you get past this problem, review and bookmark this thread [webmasterworld.com] and validate your documents [validator.w3.org] to alleviate 95% of those issues.