 |  |  |  |  |  |  |  |
Image Position Moves on Resize of Window
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
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...
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...
- Failing to value the lives of others cheapens your own
- Experience is what you get when you don’t get what you want
portfolio (under construction): http://xandercs.com/
- Experience is what you get when you don’t get what you want
portfolio (under construction): http://xandercs.com/
•
•
Join Date: Jan 2007
Posts: 276
Reputation: 
Solved Threads: 15
Posting Whiz in Training
It's a background image set in the document body.
Here's the CSS code for it:
OR a shorthand version
Here's the CSS code for it:
HTML and CSS Syntax (Toggle Plain Text)
OR a shorthand version
HTML and CSS Syntax (Toggle Plain Text)
If you know ASP, you can save other daniweb members from idiots like me by helping out in this forum.
Visit this thread if your username starts with one of the following letters: B D F H J L N P R T X Y Z.
Visit this thread if your username starts with one of the following letters: B D F H J L N P R T X Y Z.
That does not explain why the image is off of the screen and then moves left when the window is resized
- Failing to value the lives of others cheapens your own
- Experience is what you get when you don’t get what you want
portfolio (under construction): http://xandercs.com/
- Experience is what you get when you don’t get what you want
portfolio (under construction): http://xandercs.com/
•
•
Join Date: Jan 2007
Posts: 276
Reputation:
Solved Threads: 15
Posting Whiz in Training
Oh ok. sorry about that... I didn't notice the 'coming out' effect. Here's the code for it:
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. =)
body
{
background: #FFF url('logo.png') no-repeat 150% -125px;
}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. =)
If you know ASP, you can save other daniweb members from idiots like me by helping out in this forum.
Visit this thread if your username starts with one of the following letters: B D F H J L N P R T X Y Z.
Visit this thread if your username starts with one of the following letters: B D F H J L N P R T X Y Z.
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...
- Failing to value the lives of others cheapens your own
- Experience is what you get when you don’t get what you want
portfolio (under construction): http://xandercs.com/
- Experience is what you get when you don’t get what you want
portfolio (under construction): http://xandercs.com/
Just noticed your response! Thanks much Kanaku! Great explanation, clarified everything extremely well!
- Failing to value the lives of others cheapens your own
- Experience is what you get when you don’t get what you want
portfolio (under construction): http://xandercs.com/
- Experience is what you get when you don’t get what you want
portfolio (under construction): http://xandercs.com/
•
•
Join Date: Jan 2007
Posts: 276
Reputation:
Solved Threads: 15
Posting Whiz in Training
You're welcome. 
It was fun learning too...
It was fun learning too... If you know ASP, you can save other daniweb members from idiots like me by helping out in this forum.
Visit this thread if your username starts with one of the following letters: B D F H J L N P R T X Y Z.
Visit this thread if your username starts with one of the following letters: B D F H J L N P R T X Y Z.
 |
Similar Threads
- Modifying script to open html page in inline frame (JavaScript / DHTML / AJAX)
Other Threads in the HTML and CSS Forum
- Previous Thread: Two menus to have different colour attributes
- Next Thread: Help with CSS url links on Multi pages
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
Related Forum Features
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 xml xsl
