Search code examples
cssimagewidthscale

Image across page 100%

How do I get an image as banner across the page? Below shown is my code, please suggest me a solution. 

.image {
background: url(banner.jpg) center no-repeat;
width:100%; 
height: 300px; <-- Image height
}

the best method?

then apply that css to a classed div?

<div class="image" alt="" title="">
</div>
Solution

  • put the image inside

    html

    <div class="image">
    <img src="banner.jpg"/>
</div>

    css

    .image {
    display:block;
    position:relative;
    overflow:hidden;/*keeps the image in the container*/
    height: 300px
}
.image img{position:absolute;bottom:0;width:100%}/*this is aligned to the bottom, may need to be top or center depending on the circumstances*/

    made a fiddle: http://jsfiddle.net/filever10/srdcY/