CSS for custom headers to fit any screen size

  • Unknown's avatar
    peter614 · Member ·

    I made some custom headers for my site. These headers have arrows pointing downward to draw peoples’ attention to the site’s content.

    Can somebody help me out with the CSS that will make the entire banner image show up, uncropped, at various screen sizes, so the customer headers, including the arrows, are fully visible?

    Here’s an example page: https://petersbigadventure.com/places/india/

    Thanks in advance!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    siobhyb · Member ·

    Hi @peter614,

    Pictorico assigns background-size: cover; to header images so that they can be easily resized/cropped based on the size of the screen they’re being viewed on.

    I generally recommend using only images that are decorative or abstract in the header so that they can handle that sort of cropping.

    If you’d like to stick with your current headers then you could use the following custom CSS to override the theme’s and make sure that the whole image is displayed:

    .entry-thumbnail, .header-image {
    background-size: contain;
}

    If you’d like more information about the the use of background-size in CSS then you can also refer to the following guide:

    background-size Matters

    Let me know how you get on with that or if you have any extra questions.

  • The topic ‘CSS for custom headers to fit any screen size’ is closed to new replies.