If we want to use an image as background of our web page, we can follow two different ways.
/*here the html code*/
<body>
<img class="bg" src="image.jpg" />
...
</body>
/*here the css code*/
body
{
margin: 0px;
padding: 0px;
}
img.bg
{
width: auto;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index:-9999;
}
In the css code we anchor the image on the left-top side of the page that have no margin and no padding.
If we want, we can anchor on top-right or bottom(left-right) of the page, it depends of what we want; in fact if we anchor on top-left (for example) we will always see the top and left sides of the photo, and the right - bottom sides could be cut, according to the different resolutions.
If we want to see the all width or the all hight of the image we write the css as follow:
width: 100%;
height: 100%;
/*here the html code*/
<body>
<div id="bg"><img
src="image.jpg"
width="100%"
height="100%"
alt=""></div>
...
</body>
/*here the css code*/
html
{
height:100%;
}
body
{
margin:0; padding:0;
}
#bg
{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
In this case the image won't be cut but it will be stretched according to the resolution of the monitor
My Two Cents...
Nessun commento:
Posta un commento