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

sjparker
(@sjparker)

8 years, 4 months ago

Hello all!

Have a quick question around the woocommerce site I’m building. It’s been pretty trouble free so far, and we even have fulfilment by Amazon working well.

My only issue is the header image; we’ve had the following made based on the dimensions that wordpress suggests (1950 × 500):

but isn’t looking as planned in the header area:

I understand that header image dynamically zooms/scales based on resolution and device but does anyone have any suggests on how to make the header fit as I’d like to?

Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)

Majeed Raza
(@lorro)

8 years, 4 months ago

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

Thread Starter sjparker
(@sjparker)

8 years, 4 months ago

Thanks!

http://www.ellereve.co.uk
Majeed Raza
(@lorro)

8 years, 4 months ago
Try this custom css:
```
.site-header {
  background-size:100% 100%
}
```
Custom css can be entered at:
Dashboard > Appearance > Customise > Additional CSS
Thread Starter sjparker
(@sjparker)

8 years, 4 months ago

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!
Majeed Raza
(@lorro)

8 years, 4 months ago
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:
http://jigsaw.w3.org/css-validator/#validate_by_input
- This reply was modified 8 years, 4 months ago by Majeed Raza.
Thread Starter sjparker
(@sjparker)

8 years, 4 months ago
I’ve added that CSS, and it looks a lot better!

Thanks so much for your help Lorro.
- This reply was modified 8 years, 4 months ago by sjparker.
Thread Starter sjparker
(@sjparker)

8 years, 4 months ago

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!

Majeed Raza
(@lorro)

8 years, 4 months ago

Explanation here, 2nd post:
http://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”!

rrwnshow
(@rrwnshow)

8 years ago

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 http://www.rrwnshow.com so you can see what the header is doing.

Thanks in advance if anyone can help me!
~Nat

Majeed Raza
(@lorro)

8 years ago

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

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Can’t get header image to scale correctly, always zoomed!’ is closed to new replies.