Link to home
Avatar of dgrafx
dgrafxFlag for United States of America

asked on

responsive header image

I have a header
.siteheader {
      height : 155px;
      width : 100%;
      max-width: 1200px;
      margin:0 auto;
      background-repeat : no-Repeat;
      background-image : url("../images/header1.png");
      background-position : 0px 0px;
      background-size: 100% auto !important;
      /*border-bottom:1px solid #999;*/
}
as you can see I have the image resize according to browser size

I REALLY want this border-bottom but have commented it out because as the image height decreases then I have empty blank space within the header because the header itself is not resizing - so removing the border looks like the empty space belongs to the content area below the header.

question is how can I resize the header as the browser window changes size
I can then probably use background-size 100% 100%
I've tried
.siteheader {
      max-height : 155px;
      height : auto;
      min-height : ???;
what would i put for min-height?

or actually what should I do here with this situation?
thanks
Avatar of Timoros
Timoros
Flag of Greece image

Can you provide a link?
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of dgrafx

ASKER

I solved it by using both cover and a media query to swap out one of the images
I originally didn't want to use cover because I had some text that was being cropped
I broke the header image into 2 images and used your suggestions
Thanks

.siteheader {
      height:155px;
      min-height:77px;
      width : 100%;
      max-width: 1200px;
      margin:0 auto;
      border-bottom:1px solid #999;      
      background-image : url("../images/header2AF.png"), url("../images/header2.png");
      background-position : 60% 70%, 0px 0px;
      background-repeat : no-Repeat;
      background-size: initial, cover;      
}
@media only screen and (max-width: 768px) {
      .siteheader {
            background-image : url("../images/header2AF-sm.png"), url("../images/header2.png");
            background-position : 60% 70%, 0px 0px;
            background-repeat : no-Repeat;
            background-size: initial, cover;
      }
      
}
You are welcome.