Image Position Moves on Resize of Window

[xander85]

If anyone can explain the behavior that I observed recently then they deserve a cookie for their knowledge of HTML and CSS...

I observed this behavior in FireFox haven't tried this in another browser. Navigate to this website http://novemberborn.net/sifr3/r436 and resize the browser window horizontally down to about 200px. Notice how the image at the top right repositions itself? If anyone can explain this to me i'd appreciate it...

[kanaku]

It's a background image set in the document body.

Here's the CSS code for it:

body
{
background-image: url(image.gif);
background-position: top right;
background-repeat: no-repeat;
}

OR a shorthand version

body
{
background: #FFFFFF url(image.gif) no-repeat top right;
}

[xander85]

That does not explain why the image is off of the screen and then moves left when the window is resized

[kanaku]

Oh ok. sorry about that... I didn't notice the 'coming out' effect. Here's the code for it:

body
{
background: #FFF url('logo.png') no-repeat 150% -125px;
}

I snooped at the code *hungs head in shame* and played around with the values. The % should be greater than 100. The -125px is the background's distance from the top (you can set it to 0 if you want to observe the behavior of the background as a test subject).

The % value specifies the horizontal position of the background. 0 means left and 100% means right. Since the value is greater than 100%, the background is partially hidden (the rightmost portion of the background is in 115% of the browser's width). For example, if your monitor is 1000px, the background's rightmost part is at 1150px. So 150 pixels of your background is hidden.

Since 115% of 200pixels is less than 115% of 1000 pixels, resizing the browser to 200pixels is like positioning the background's rightmost edge to to (15% of 200) or 30 pixels from the 'end' of the browser. This brings down the 'hidden' portion of your background to 30 pixels (from the initial 150).

I don't understand the exact concept of which exact value to use... For example, if it's really the right-edge that's being positioned, setting a value of 0% should hide the image completely, right? But it positions the background to the left. =/

If you want to play with the values, try a negative %. It hides the background when you increase the browser's width. =)

[xander85]

Google Chrome, Firefox and IE7 all exhibit different behavior. With regards to the position of the image at the top right. I just wanna know why the image moves its position in relation to the window...

[xander85]

Just noticed your response! Thanks much Kanaku! Great explanation, clarified everything extremely well!

[kanaku]

You're welcome. :) It was fun learning too...