Can’t get header image to scale correctly, always zoomed!

Please post the url of your site so the styles can be examined with browser tools.

Thanks!

https://www.ellereve.co.uk

Try this custom css:

.site-header {
  background-size:100% 100%
}

Custom css can be entered at:
Dashboard > Appearance > Customise > Additional CSS

Thanks Lorro!

Adding that gave a massive improvement, but it seems to be squashing the image a bit. I’ve added a screenshot of the webpage in the background with the custom CSS active, and in the foreground is the header that was designed with the aforementioned dimensions:

How can I find out the dimensions to use so that header doesn’t look that slightly bit squished?

Thanks again!

An image that is 1900 x 500 has an aspect ratio of 0.256.

The height of a block element can be set to follow the height of an enclosed image, but this is not so for a background image.

It would be possible to use JavaScript to find out the user’s viewport width and calculate and set the header height proportionately. However, such a script goes beyond a normal forum answer.

I think the best that can be done using css is to set the height of the header for common viewport widths. There will be limited distortion at in-between viewport widths.

/* all viewport widths greater than 1024px */
.site-header {
  height:297px
}
.site-search {
  margin-bottom:100px
}
/* viewport widths between 769px and 1024px */
@media only screen and (max-width:1024px) {
  .site-header {
    height:262px
  }
  .site-search {
    margin-bottom:65px
  }
}
@media only screen and (max-width:768px) {
  .site-header {
    height:197px
  }
}
@media only screen and (max-width:640px) {
  .site-header {
    height:164px
  }
}
@media only screen and (max-width:480px) {
  .site-header {
    height:123px
  }
}

You can validate your css using this service:
https://jigsaw.w3.org/css-validator/#validate_by_input

• This reply was modified 8 years, 1 month ago by Majeed Raza.

I’ve added that CSS, and it looks a lot better!

Thanks so much for your help Lorro.

• This reply was modified 8 years, 1 month ago by sjparker.

Hi Lorro,

I think I may have spoken a little too soon. I’ve been going through testing browsers and although Chrome, Firefox and IE appear to display the header image correctly, it disappears in Safari:

Do you have any idea what’s causing this for Safari only?

Thanks!

Explanation here, 2nd post:
https://stackoverflow.com/questions/17341728/background-image-not-showing-in-safari
Quite a few hits on Google on this subject. I thought Apple stuff was supposed to “just work”!

Hi all, I found lorro’s comment helpful and I went to copy the CSS code as instructed, to no avail. My header is still spilling over despite it being created using exact pixel size WP suggested. Can anyone help?

Also, does it make a difference if it’s in WP dot com vs. dot org?

My site is https://www.rrwnshow.com so you can see what the header is doing.

Thanks in advance if anyone can help me!
~Nat

Sorry for the late reply. I can’t see a header image, did you remove it?