943,737 Members | Top Members by Rank

Ad:
Jan 2nd, 2009
0

Image Position Moves on Resize of Window

Expand Post »
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...
Similar Threads
Reputation Points: 16
Solved Threads: 1
Light Poster
xander85 is offline Offline
29 posts
since Jul 2007
Jan 2nd, 2009
1

Re: Image Position Moves on Resize of Window

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

Here's the CSS code for it:
HTML and CSS Syntax (Toggle Plain Text)
  1. body
  2. {
  3. background-image: url(image.gif);
  4. background-position: top right;
  5. background-repeat: no-repeat;
  6. }

OR a shorthand version
HTML and CSS Syntax (Toggle Plain Text)
  1. body
  2. {
  3. background: #FFFFFF url(image.gif) no-repeat top right;
  4. }
Reputation Points: 70
Solved Threads: 15
Posting Whiz
kanaku is offline Offline
378 posts
since Jan 2007
Jan 2nd, 2009
0

Re: Image Position Moves on Resize of Window

That does not explain why the image is off of the screen and then moves left when the window is resized
Reputation Points: 16
Solved Threads: 1
Light Poster
xander85 is offline Offline
29 posts
since Jul 2007
Jan 3rd, 2009
0

Re: Image Position Moves on Resize of Window

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. =)
Reputation Points: 70
Solved Threads: 15
Posting Whiz
kanaku is offline Offline
378 posts
since Jan 2007
Jan 3rd, 2009
0

Re: Image Position Moves on Resize of Window

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...
Reputation Points: 16
Solved Threads: 1
Light Poster
xander85 is offline Offline
29 posts
since Jul 2007
Jan 3rd, 2009
0

Re: Image Position Moves on Resize of Window

Just noticed your response! Thanks much Kanaku! Great explanation, clarified everything extremely well!
Reputation Points: 16
Solved Threads: 1
Light Poster
xander85 is offline Offline
29 posts
since Jul 2007
Jan 4th, 2009
0

Re: Image Position Moves on Resize of Window

You're welcome. It was fun learning too...
Reputation Points: 70
Solved Threads: 15
Posting Whiz
kanaku is offline Offline
378 posts
since Jan 2007

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Two menus to have different colour attributes
Next Thread in HTML and CSS Forum Timeline: Help with CSS url links on Multi pages





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC