Header with cover image: how do I set it to stay a fixed size?

  • Resolved pafcaf1340

    (@pafcaf1340)


    2 years, 3 months ago

    Okay I’ve searched and searched and searched…there are hundreds of posts about header image width but nothing I’ve found solves my issue, so I’m posting.

    I want my header image to stay at 100% even if a user zooms in or out on their browser magnification or has their resolution set to 125%

    I created my site in wordpress 5.9 with blocks, and created my header using a cover with an image that is 1917 wide by 502 high. I’d like the image to fill the width of the page. For the most part it does, when my monitor display resolution is set to 1920×1080 (recommended) and my scale is set to 100% (recommended). This theme is Ona, but I have the same exact issue with Twenty Twenty Two.

    If I zoom my browser’s magnification in or out, the image changes size as well, shrinking or expanding with my changed settings. I’ve seen other wordpress sites where the header image stays the same size regardless of monitor settings or browser magnification, and that is my goal.

    • This topic was modified 2 years, 3 months ago by Jan Dembowski.
    • This topic was modified 2 years, 3 months ago by James Huff.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Theme Author DeoThemes

    (@deothemes)

    Hi,

    When using a cover image block the image is a background image and it’s always 100% wide as you can see here – https://ona.deothemes.com/. However, on your site, it’s a regular image, so you can stretch it with CSS:

    .wp-image-121 {
  width: 100%;
}
Viewing 1 replies (of 1 total)
  • The topic ‘Header with cover image: how do I set it to stay a fixed size?’ is closed to new replies.