ansaurus

Question

Make an <img> tag extend past the <body> tag in css

Answer 1

+1 A:

You are right, it does not work. Why does it has to be inside the container?

You could do it like this.

<html>
<head>
<style>  
html, body{ 
width: 100%; 
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
} 
#header{
width: 2000px;
float: left;
overflow: hidden;
}
#container{
width: 960px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
#page{
overflow: hidden;
width: 100%; 
height: 100%;
}
</style>  
 </head>
<body>
    <div id="page"> 
    <div id="header"> 
      <img src="myimage.jpg" alt="my image" />  
    </div> 
<div id="container">  
</div>
    </div>
</body> 
</html>

Lukas Oppermann 2010-06-22 11:50:49

sorry lucas, no luck.

Rob 2010-06-22 11:52:30

Thanks lukas for your second attempt :) This would work i recon, however i'd like to stick away from creating two containers, so i recon i shall stick with my original background image approach :) Thank you ever so much for your support however! :) +1

Rob 2010-06-22 18:34:17

Answer 2

+1 A:

If the img is to be placed exactly at x-pos:0 and Y-pos:0, you could use position:absolute to placed it:

img#my_header{

 position:absolute; // Tell the browser to break document work flow for this ID

 z-index:1; // Tell the browser to pull up in the stack this ID by 1

 top:0; // tell the browser to place this ID at 0px from top of view port

 left:0; // tell the browser to place this ID at 0px from left of view port

}

This is a sample, to give you an idea who you can break the document workflow to set your img tag into the desired place... adjusting top and left coordinates, you should solve it!

Hope it helps!

Zuul 2010-06-22 11:53:26

Thanks for your answer! I tried this but had no luck, it positioned it great, however scroll bars still appear on a large image (say 1280px)I think i can see now why we use background images instead of img tags for this kinda thing

Rob 2010-06-22 18:31:19

Answer 3

+1 A:

My thought is similar to Lucas's. Take the out of the container, and put it in it's own container (id="header" for example). Set #header to width: 100% (which should be the width of the viewport, and overflow: hidden. Then position #header as you want - use Zuul's suggestion of absolute positioning if necessary.

...
<style type="text/css">
#header { width: 100%; overflow: hidden; margin: 0; }
</style>
...
<div id="header">
    <img src="myimage.jpg" alt="My Image" />
</div>
...

I think that should work out for you.

Ryan Kinal 2010-06-22 16:05:24

ansaurus

tags:

views:

answers:

Make an <img> tag extend past the <body> tag in css

related questions