Full-width masthead image

  • Resolved mnatseah624

    (@mnatseah624)


    4 years, 11 months ago

    Hello folks
    I’m looking for a bit of code to make my masthead image stretch the width of the container. I tried this…

    header#masthead {
    background-size: cover;
    background-repeat: no-repeat;
}

    But it doesn’t work. Anyone got any ideas?
    PS It would also be nice to have the option of stretching it full-width.
    Thanks for any help.

    • This topic was modified 4 years, 11 months ago by mnatseah624.

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

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

  • Hi there,

    Are you talking about the featured image of the home page?

    If so try this CSS:

    .page-header-image.grid-container {
    max-width: 100%;
}

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Then make sure to use an image around 2000px to make it full width (it’s currently at 1000px)

    Let me know if this helps ??

    Thread Starter mnatseah624

    (@mnatseah624)

    Hello Leo
    Thanks for your reply. I’m not sure if that code made the image bigger, but it made it jump to the left. How would I add that code and center the image?
    Also, is it not possible to stretch the 1000px image? I want to keep load time fast, and big images will slow it down.

    The code doesn’t make the image bigger – it makes the container of the image full width.

    You can add this additional CSS to make the image full width but it will be pixelated:

    .page-header-image img {
    width: 100%;
}

    It’s basically like zooming in.

    • This reply was modified 4 years, 11 months ago by Leo.
    Thread Starter mnatseah624

    (@mnatseah624)

    Hello @leohsiang
    Yes, you’re right. It looks a bit pixellated. How would I stretch it only as far as the width of the text / container then?
    And one more question pls. I want the site header to be white text on black bkgrd. I tried this. 

    .site-header {
    background-color: #000000;
    color: #ffffff;
}

    It gave me the black bkgrd but not the white text.
    Thanks for any suggestions.

    Remove this CSS I provided:

    .page-header-image.grid-container {
    max-width: 100%;
}

    and keep this one only:

    .page-header-image img {
    width: 100%;
}

    Can you open a new topic for the separate question?

    Thread Starter mnatseah624

    (@mnatseah624)

    Thanks @leohsiang. Got it now.

    No problem ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Full-width masthead image’ is closed to new replies.