Member Avatar for Member #182882

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 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...

  • 2 Contributors
  • 6 Replies
  • 289 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by kanaku

Dani AI

Generated

Quick technical summary that builds on ’s answer: the graphic is moving because CSS resolves percentage background positions against the difference between the background-positioning area and the background image size. Using a horizontal percentage greater than 100% places the image’s reference point outside the element, so the computed pixel offset changes as the viewport (or container) width changes — that shifting math is what makes the image “slide in.” (developer.mozilla.org)

Formal rule (what the spec actually does): for each axis the browser computes
(background-positioning-area_size - background_image_size) * (percentage),
where background-size affects the image size used in that subtraction. If the subtraction is negative you get negative offsets (the image is pushed outward), which is why parts come into or out of view when you resize. That behavior is part of the CSS Backgrounds spec. (w3.org)

Practical ways to get predictable placement (pick one depending on whether the image should be element‑anchored or viewport‑anchored):

  • Pin a fixed pixel gap from the right edge with calc() so the offset stays constant as width changes.
  • Use an absolutely positioned <img> inside a relatively positioned container for exact, pixel-based control.
  • If viewport-anchored behavior is desired, background-attachment: fixed is an option (but it changes the anchoring model).

Example patterns:

/* keep image 20px from right edge */
.header {
  background-image: url("logo.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 20px) 0;
}
.header { position: relative; }
.header img.logo { position: absolute; right: 20px; top: 0; }

calc() is supported by modern browsers but older engines vary; for maximum compatibility consider a small JS fallback or the absolute-<img> approach. (developer.mozilla.org)

Troubleshooting checklist: inspect the computed background-position and the image intrinsic size in devtools, check background-size and background-origin (they change the calculation), and test across target browsers — the cross-browser differences you observed (Chrome/Firefox/IE7) are consistent with historical implementation variation, so choose the approach that matches the intended anchoring and the lowest-common-browser support. (developer.mozilla.org)

Recommended Answers

All 6 Replies

Member Avatar for 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;
}
commented: Great resource! You are appreciated! +2
Member Avatar for Member #182882

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

Member Avatar for 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. =)

Member Avatar for Member #182882

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...

Member Avatar for Member #182882

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

Member Avatar for kanaku

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.