Make the background image of the header responsive

[Stefany93]

Howdy,

 

I want to make this background image in the header responsive - www.studyingthepast.com/mobile

 

I kept trying and trying and trying and trying to no avail.

 

Here is my code:

#header_container{
	background-image:url('../images/studyingthepast_smaller_banner.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 100% auto;
	color:#F3F3F3;
}

header{

	width:950px;
	height:339px;
}

Many Thanks!

[maxxd]

The image is scaling - what results are you expecting to see? You've got a set pixel width on your header and footer elements that need to be either turned into a percentage width or adjusted manually with media queries.

[IThinkMyBrainHurts]

In your case a media query may look like this:

 

#header_container{
    background-image:url('../images/studyingthepast_smaller_banner.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% auto;
    color:#F3F3F3;
}

header{
    width:950px;
    height:339px;
}
 
@media screen and (max-width:760px){
   header{
       width:475px;
       height:170px;
   }
}

 

See: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

 

 

*** Due to the size of your original image you may want to change the size at which the media query kicks in... Oh, you can have multiple media queries.

Edited April 8, 2015 by IThinkMyBrainHurts

[Stefany93]

Thank you. What about the header height? Should I use media queries for it too? Or is there a another trick? Because now the background image is scaling, but the header is always 339px. Cannot remove it because then my background image will not appear.

[Stefany93]

In your case a media query may look like this:

 

#header_container{
    background-image:url('../images/studyingthepast_smaller_banner.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% auto;
    color:#F3F3F3;
}

header{
    width:950px;
    height:339px;
}
 
@media screen and (max-width:760px){
   header{
       width:475px;
       height:170px;
   }
}

 

See: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

 

 

*** Due to the size of your original image you may want to change the size at which the media query kicks in... Oh, you can have multiple media queries.

 

 

Many thanks. I will try this.

[IThinkMyBrainHurts]

Same same...

...
 
@media screen and (max-width:760px){
   header{
       width:475px;
       height:170px;
   }
   #header_container{
       background-size: 100% 170px;
   }
}

I would have thought that "auto" should do it though...

Edited April 8, 2015 by IThinkMyBrainHurts

[IThinkMyBrainHurts]

Looking again and yes if you need the image a different size then specifically set "background-size" as required.