Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.
-
I want to use an image in the background image which shud cover the whole browser window and will remain static and the content over it will scroll. But the issue is that what size of background image i shud use so that the image appears with its 100% height and width on browsers with different resolution.
Thanks -
#background {
z-index : -1;
width : 100%;
position : absolute;
height : 100%;
}
#scroller {
z-index : 2;
left : 0;
overflow : auto;
width : 100%;
position : absolute;
top : 0;
height : 100%;
}
#content {
padding-right : 20%;
padding-left : 20%;
padding-bottom : 1%;
padding-top : 1%;
}
I put something like that into the HEAD and the following into the BODY<div>you may have a look on my page http://jugendhilfe.biester.ev.googlepages.com/biester-muehle.html
<img id="background" title="some-hintergrund" alt="some-hintergrund" src="http://some.jpg" name="background">
</div>
<div id="scroller">
<div id="content">
<p>good luck<p>
</div>
<div>
There it runs well. You can resize it and everything stays on its position without cutting the backround.
Hope that fits to your page too. -
Unfortunately, CSS doesn't provide for the dimensioning of background images; they are rendered at their native size.
An absolutely positioned image could be scaled/sized as <style>#image{width:100%;height:100%}</style>.
The obvious problem is that an image specified in the document flow will scroll with the page.
Modern browsers support position:fixed, but older IEs don't work with it.
One approach is to turn off scrolling for the body... <style>html,body{overflow:hidden;width:100%;height:100%}</style>
Put in your image.
Then, create a page wrapper, <style>#wrapper{overflow:auto;height:100%}</style>
I can't do justice to this subject.
Take a look at... http://www.w3a2z.net/ to see me effort towards this object.
In that case, I resorted to JavaScript to make the wrapper fill the height of the viewport because I couldn't get {height:100%} to work but... I didn't try <style>#html,body{height:100%}</style>, a suggestion that I recently came across.
You can contact me via that site... happy :) to help...
1 to 3 of 3