FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

css - background

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


sonam
Hi,
Is it possible with css to stretch background image trought window (height = 100% widht = 100%) because I would like to have image from top to bottom.

Sonam
jabapyth
Yes!
put this in your style:
Code:

img.background {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

and then put this at the very top of your body:
Code:
<img class="background" src="mybackimg.jpg"/>


Hope this helps
sonam
Thanks jabapyth,
it is work fine when I would like to insert only image. My next question, how can do the same but with body (I would like to insert content trought page)? I was try your sugestion from
http://www.frihost.com/forums/vt-65787.html
but it is not stretch image when is in body deffinition. Any new idea, ot it is not possible.

Sonam
loophole64
I like this method:

Code:

<html>
<head>

<style type="text/css">

   body   {margin:0;
               padding: 0;
               overflow-y: hidden;}

   div.bg   {position: absolute;
                top: 0; left: 0;
                width: 100%; height: 100%;}

   div.bg img   {width: 100%; height: 100%}

   div.content    {position: absolute;
                       background-image: url('trans.gif');
                       z-index: 1;
                       color: white;
                       top: 0; left: 0;
                       width: 100%; height: 100%;
                       overflow-y: auto;}
</style>

</head>

<body>
<div class="bg"><img src="test.jpg"></div>

<div class="content">
   Content goes here.
</div>

</body>
</html>



This works well for firefox 2 and IE7, and it should work for FF1.5 and IE6 as well. I haven't tested in other browsers.

The trans.gif is just a 1 pixel transparent gif. It's there because IE won't recognize that the mouse is over blank space in the content div unless it has a background image or color. This makes scroll wheeling not work, and onmouseover behave unpredictably, so I give it a transparent gif.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.