Background Image Positioning…

@stmasiMar 26.2004

Take a look at the attached files and tell me why the background isn’t positioned correctly.

Thanx.

~~[upl-file uuid=4e3e3de7-359a-45a5-8bf7-5e2b23d3bc0a size=19kB]~~testweb.zip[/upl-file]

to post a comment

37 Comments(s) _↴

@SamMar 26.2004 — #2 problems:

1) image is bigger than content area

2) background definition in #cont should be:

[code=php]
 background: #fff url(../gfx/background.jpg) center center no-repeat;
 [/code]

@stmasiauthorMar 26.2004 — #Interesting.

The background image being bigger, must be because of the borders, right?

According to W3 specs, isn't 50% 50% the same as center center?

Thanx.

@SamMar 26.2004 — #that wasn't the problem, i just use center because i like it better. the problem was the "fixed" position.

#cont is 700x450, the exact same as the image, thus centering really doesn't do anything

@stmasiauthorMar 26.2004 — #Hmm...

Now I have another problem.

I have the div set to scroll based on length of content, but when it does, the image is now in the middle of the scroll instead of fixed at the top and not moving (in IE).

How do I fix that?

Thanx.

@scottOMar 26.2004 — #[i]Originally posted by stmasi [/i]

[B]Hmm...

Now I have another problem.

I have the div set to scroll based on length of content, but when it does, the image is now in the middle of the scroll instead of fixed at the top and not moving (in IE).

How do I fix that?

Thanx. [/B][/QUOTE]
Try this:
[code=php]background: #fff url(../gfx/background.jpg) no-repeat fixed top left;[/code]

@stmasiauthorMar 26.2004 — #Thanx...

But...

Is there a fix for those of us without the "helpful" hand of server-side assistants?

?

Thanx.

@SamMar 26.2004 — #you're going to have to use a little hack to get this to work right in IE and FF. Here it is:

[code=php]
 #cont
 {
 background:      #fff url(../gfx/background.jpg) center center no-repeat !important;
 background:      #fff url(../gfx/background.jpg) top left fixed;
 height:          450px;
 margin:          0;
 overflow:        auto;
 padding:         0;
 text-align:      justify;
 }
 [/code]

@stmasiauthorMar 26.2004 — #Cool!

It works!!!

Thanx!!!!!

?

@SamMar 26.2004 — #glad to help

@stmasiauthorMar 26.2004 — #Wait a minute.

?

Now, when I use Netscape, and area overflows, as I scroll down, the background image moves upward and at the same time, underneath, is another background image that is fixed in place.

Huh?

Thanx.

@SamMar 27.2004 — #say what? got a screen shot? i don't think its possible that netscape is applying both rules, so i'm not quite sure whats happening here... what version of NS?

@stmasiauthorMar 27.2004 — #Can't get a screenshot, sorry. But I can tell you that it is Netscape 7.1, their free download.

Thanx.

@stmasiauthorMar 29.2004 — #Okay, I have a screen shot now, but it's animated and even when it's zipped up, it's still almost 2MB. I've attached it to my test page so people can download it and take a look...

http://www.geocities.com/stmasi

Let me know what you think.

Thanx.

@DaveSWMar 29.2004 — #I think...

have you got a zip of your files as you are using to get that interesting effect? :p

@stmasiauthorMar 29.2004 — #Here they be...

?

Thanx.

[upl-file uuid=a82d5cfb-bd1a-4d48-abc6-b07383f825d5 size=19kB]testweb.zip[/upl-file]

@DaveSWMar 29.2004 — #Well I've dropped in some fake latin and it works fine for me in

[i]from 'about' option[/i]

Netscape 7.1

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)
[/quote]

and IE6.

Either they've updated the download between one of us downloading it or your graphics card is screwing up. try rebooting and opening it as the first file you open ?

@stmasiauthorMar 29.2004 — #Well...

It simply cannot be the graphics card as this problem (for lack of a better word) is occuring on five different workstations with five different video cards. These are the only ones I'm testing with.

Thanx.

P.S. My Netscape is...

Netscape 7.1

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)

Only having this problem in Netscape...works fine on EVERY other browser.

@DaveSWMar 29.2004 — #LOL

What OS?

@stmasiauthorMar 29.2004 — #Unfortunately, all machines I'm testing with are Windows XP Professional.

Thanx.

@DaveSWMar 29.2004 — #I'm on XP home.

Try looking at the page I'm using: http://www.emdevelopments.co.uk/demo/stmasi/

@stmasiauthorMar 29.2004 — #Here's what I see under said version of Netscape (all other browsers just fine):

http://www.geocities.com/stmasi

@SamMar 29.2004 — #this is really wierd...

this is from XP Pro with NS 7.1

[URL=http://www.medford.k12.or.us/sample/stmasi1.jpg]screenshot 1[/URL]: this is what it looked like initially.

[URL=http://www.medford.k12.or.us/sample/stmasi2.jpg]screenshot 2[/URL]: this is what it looked like when the window was vertically resised.

not sure what is causing this though...

NOTE: screenshots are 150kb each, may be long loads

@stmasiauthorMar 29.2004 — #Finally!!!

?

Someone else is seeing what I was seeing! I thought I was going to have to check myself in somewhere.

Whew!!!

So...what the heck is causing that?!

Thanx.

@stmasiauthorMar 29.2004 — #I still can't figure this darn thing out!

I've even gone as far as deleting the files completely and working over from scratch. Still get the same results.

Any other ideas out there?

Thanx.

@stmasiauthorMar 30.2004 — #So...

Everyone else is just as stumped as me, eh?

?

Good...I don't feel so bad about almost having a stroke over this one. No matter how many times I re-try this darn thing, I get the same two stupid results.

I truly am attempting to embrace CSS and all the wonders therein, but sometimes I just want to walk out to my shed, get my 40# sledgehammer and let loose on this machine.

?

Thanx for all your help guyz and galz.

@SamMar 30.2004 — #hmmm... since the viewport and the image are the same size, why not try removing the hack all together, and just using the definition we were giving to ie:
[code=php]background: #fff url(../gfx/background.jpg) top left fixed;[/code]

@stmasiauthorMar 30.2004 — #Nope.

Now only IE looks right.

Hmm...

Since I have a div within a div, perhaps I need to apply the background to the child div instead of the parent div?

Thanx.

@stmasiauthorMar 30.2004 — #Nope.

Didn't make a difference.

Sheesh...may as well just go with no background image at all...save a whole lot of headaches.

Thanx.

@stmasiauthorMar 30.2004 — #Any takers?

?

Last call...

Thanx.

@stmasiauthorMar 30.2004 — #Going once...

@DaveSWMar 30.2004 — #Check out my page again

http://www.emdevelopments.co.uk/demo/stmasi/

@DaveSWMar 30.2004 — #The problem seems to have something to do with whether the browser window is maximised or not.

@stmasiauthorMar 30.2004 — #Thanx, Dave.

Still looks weird in Netscape. Check out the attached screen-shot.

My Netscape browser is maximized vertically, but not horizontally.

Strange.

[upl-file uuid=1855d0f7-2843-4fac-83ad-a1db8bc24a81 size=99kB]capture1.gif[/upl-file]

@DaveSWMar 30.2004 — #When I've got more time I'll try and create the layout from scratch. Unfortunately that won't happen till the end of the week (easter hols has a stack of coursework deadlines before it unfortunately.)

going twice...

@stmasiauthorMar 30.2004 — #Thanx, Dave.

Muchly appreciated.

@DaveSWApr 03.2004 — #OK I've tested it using a cut down version, and from what I can gather the problem is that when you use the word 'fixed' in relation to your background it puts the background as it would from the edge of the browser window. I can't find a way to avoid this either.

Browser detection may be the only way around this.

@DaveSWApr 05.2004 — #I lied... ?

Try two divs - one with your background in it, the same size as the background, then another nested inside, slightly smaller, with the contents and overflow: auto on it.

You then don't need to fix the background position because that div never overflows.

Brainwave struck at 11am yesterday ?

Also in #CSS _↴

Almost 100% height?help please Interesting method to fully enclose a floated element within another (edited???)

Success!

Help @stmasi spread the word by sharing this article on Twitter...

Tweet This

Background Image Positioning…

37 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Background Image Positioning…

37 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

37 Comments(s) _↴

Also in #CSS _↴