• 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)
  • Please post the url of your site so the styles can be examined with browser tools.

    Thread Starter sjparker

    (@sjparker)

    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)

    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!

    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.
    Thread Starter sjparker

    (@sjparker)

    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.
    Thread Starter sjparker

    (@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:

    Image

    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?

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.