CODEWITHSUNDEEP
csshtmlimageresponsive-design
scotia
scotia

Reputation: 71

CSS/HTML5 Responsive Header Image

I'd like my header image to scale with the browser size. This is my current code for the att. screen grab, but this doesn't scale the image on smaller screens. Ive tried using the background image options but this doesn't achieve the look I want.

  .header-image {    
    position:absolute;
    top:0;
    bottom:0;   
    max-height:1000px;
    overflow:hidden;    
      left: 0; 
      right: 0;
    z-index:-1;         
      border:10px solid #545351;        
}

.header {
    width: 100%;
    padding-top:50px;
    margin-top:-10px;       
}

& HTML

<div align="center"><!-- big image -->
        <div class="header-image"><img src="images/liveryHeader3.jpg"></div><!-- end of big image-->
</div><!-- end of center image class-->

Screen Grab from current site

Example of what client sees

The second image is roughly what shows on smaller monitor, the image hasn't scaled & layout looks odd - Id like to scale the horse head so that the full image still shows. It seems to work on Android & tablet, just not smaller monitors?

Upvotes: 2

Views: 30348

Answers (6)

Rupeck
Rupeck

Reputation: 11

input the id into div like this (use only one div)

HTML:

<div id="header"> </div>

CSS:

#header{
  background-image:url(../images/liveryHeader3.jpg);
  background-size: 100% 100%;
}

OBS: into background-size, the first value is to width and second is to height

for more information : http://www.w3schools.com/default.asp

Upvotes: 1

Leonard
Leonard

Reputation: 49

Just try this (It fits the size of the image so that it exactly covers the screen.):

.header-image img {
    width: 100% !important;
}

Example: http://jsfiddle.net/leo/qsMKf/

Upvotes: 2

Stewartside
Stewartside

Reputation: 20905

If you put the actual image into the css as a background element and then set background-size to contain it should make it fit to the exact screen size.

something like this:

.header-image {    
    position:absolute;
    top:0;
    bottom:0;   
    max-height:1000px;
    overflow:hidden;    
    left: 0; 
    right: 0;
    z-index:-1;         
    border:10px solid #545351;  
    background: url(*IMAGE URL HERE*) no-repeat;
    background-size: cover;
}

See how that goes.

Upvotes: 0

service-paradis
service-paradis

Reputation: 3398

I hope i understand well what you really want.

You have to set max-width at 100% on your image and on it parent.

So your css for those element would look like this:

.header-image {
    position:absolute;
    top:0;
    bottom:0;   
    max-height:1000px;
    max-width:100%;
    overflow:hidden;    
    left: 0;
    right: 0;
    z-index:-1; /*places header image behind text */
    border:10px solid #545351;
}

.header-image img {
    max-width:100%; 
}

Upvotes: 0

kelly johnson
kelly johnson

Reputation: 1636

Your image won't scale down with width:100%; it will only scale up so whatever the size is of the image it will stay. You need to use a "media query" and then set a different % there.

Something like:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* put your specific styling here either replacing the background image with something smaller using % or sized down via % */
}

Upvotes: 1

Iłya Bursov
Iłya Bursov

Reputation: 24146

code you provided doesn't scale image as it seen on screenshot, so you first should look at place where it is really stretched

anyway, check max-height:1000px; in css - this can limit, and of course you should add width:100%;height:100%; to your image and outer div as well

Upvotes: 0

Related Questions