Argent theme messing up my header images

  • Unknown's avatar
    qfairytales · Member ·

    Hi there. I’m setting up a new site using the Argent theme. Followed instructions for the size of the jpg header image to the pixel, but it keeps cropping and stretching it. It looks super funky bad. Anyone have any fixes for this? I’d like to customize the image on each page if possible, at least control the size from home to secondary pages eventually. For now, I’d just like it to look professional and it doesn’t.

    Thanks!

  • Unknown's avatar
    sarahblackstock · Member ·

    Hi there!

    Are you still having this issue? If so…

    When the header is sized to the recommended 2000 × 380px do you see any issues with how it displays?

    On which browsers/devices are you seeing this? (Does it look different on different ones or generally the same to you?)

  • Unknown's avatar
    qfairytales · Member ·

    Hi! Yes, it looks fine on the front page but the secondary pages crop the image. I’ve checked it on my chromebook and my desk top in google chrome and firefox.

    The site is http://www.quantumfairytales.org if you want to take a look at it. It’s the main image with the octopus and fairy.

    I’d love to be able to have different images on different pages. Is that possible?

    Thank you!!
    gwen

  • Unknown's avatar
    quantumft · Member ·

    HA! I figured out what was wrong! The theme resizes the image depending on the size of the window it is displayed in. So what I need is an image that won’t look stupid when it’s resized like that, or a new theme. I’m guessing there’s no way to set Argent to leave the bloody header alone. Eh?

    Thanks for your help!

  • kathrynwp · Staff ·

    Glad you figured it out! The header graphic in Argent is a background image, so it may be cropped differently, at different screen sizes.

    I’d love to be able to have different images on different pages. Is that possible?

    You could do that with CSS, by targeting different pages using their unique class on the body tag.

    For example, if you view the browser source on the Gnomies page and look for the body tag, you’ll see this:

    <body class="page page-id-7 page-template-default logged-in admin-bar no-customize-support mp6 customizer-styles-applied without-featured-image highlander-enabled highlander-light custom-colors theme-menu-maximized">

    That means the unique ID for this page is page-id-7 and you can target it with custom CSS like this:

    .page-id-7 .site-branding { 
  background-image: url(https://quantumfairytalesdotorg.files.wordpress.com/2016/04/2016headersm.jpg);
}

    Replace the URL with the path to your new image in your media library, and repeat for as many different pages as you’d like.

  • The topic ‘Argent theme messing up my header images’ is closed to new replies.