Support » Plugin: WooCommerce » Can’t get header image to scale correctly, always zoomed!

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

  • sjparker

    (@sjparker)


    3 years, 11 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):
    Banner

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

    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)
  • lorro

    (@lorro)

    3 years, 11 months ago

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

    sjparker

    (@sjparker)

    3 years, 11 months ago

    Thanks!

    http://www.ellereve.co.uk

    lorro

    (@lorro)

    3 years, 11 months ago

    Try this custom css:

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

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

    sjparker

    (@sjparker)

    3 years, 11 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:

    image

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

    Thanks again!

    lorro

    (@lorro)

    3 years, 11 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 3 years, 11 months ago by lorro.
    sjparker

    (@sjparker)

    3 years, 11 months ago

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

    Thanks so much for your help Lorro.

    • This reply was modified 3 years, 11 months ago by sjparker.
    sjparker

    (@sjparker)

    3 years, 11 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:

    Image

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

    Thanks!

    lorro

    (@lorro)

    3 years, 11 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)

    3 years, 7 months 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

    lorro

    (@lorro)

    3 years, 7 months 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.

Views