+- Twitist Forums (http://twitist.com)
+-- Forum: Facebook forums (/forum-14.html)
+--- Forum: General facebook and life forums (/forum-25.html)
+--- Thread: How do I get an image to go across the top of a webpage? (/thread-37258.html)
How do I get an image to go across the top of a webpage? - Kristy - 11-09-2012 08:51 PM
I'm currently re-working a webpage (using just CSS and HTML.) There's an image that is supposed to go across the top of the page. The problem is, the image has a specified size, so I can get it to fit when I'm viewing it on, say, my monitor, but on a different monitor or different browser it stops short and there's just this blank space to the right of the image. How can I tell it to size itself to fit the length of the page?
- Delta9 - 11-09-2012 08:59 PM
You can try to change the specified size on the css!
for example;
#image { background-image: url(../images/images.jpg); background-repeat: no-repeat; position: relative; width: 50px; height: 50px; left: 688px; top: 83px; margin-right: auto; margin-left: auto; }
//change the width, height, left (might be right), and top to your needs//
For ie6, ie7, and ie8, you need to add the codes below, and change them according to your needs!
<!--[if lte IE 6]>
<style type="text/css">
.clearfix {height: 1%;}
img, div, input, h3 {
image-position: -1000px; //(don't change this)//
behavior: url(../scripts/iepngfix.htc");
//(create a iepngfix.htc to view png files, otherwise pngs and gifs (especially transparent ones) wouldn't work on ie6).//
}
h1.image a, #image{
background-position: -1000px;
}
h1.image a {
cursor: pointer;
}
</style>
<![endif]-->
<!--[if (IE 7.0)]>
<style type="text/css">
#image {XXpx} //check the image on your browser, and specify the XX part - this will move the image let's say 2px to the right on ie7 make the picture where you want it to be//
.clearfix {display: inline-block;}
</style>
<![endif]-->
<!--[if (IE 8.0)]>
<style type="text/css">
#image {XXpx} //again check the image on your browser, and specify the XX part//
.clearfix {display: inline-block;}
</style>
<![endif]-->
ie6 might be confusing, so i recommend you not to use ie6 codes...facebook, youtube, and many others don't work with ie6 anymore. So just use the codes for ie7 and ie8 above.
//hope this helps//