Avatar of dgrafx
dgrafx
Flag 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
CSS

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Timoros

Can you provide a link?
ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION 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
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
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;
      }
      
}
Julian Hansen

You are welcome.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes