Using large Header images

  • I’m having trouble understanding how modern themes use large header images.

    I am used to using smaller images of a defined size, and the whole image normally shows no matter the size of the screen. But many themes these days feature large header images which don’t fully appear on screen and the amount and aspect ratio of the image shown depends on the screen size. This makes it harder to predict what will be visible.

    Some themes recommend an optimum image size, which I think shows the full image at one screen size, and the truncated image at all other screen sizes. Other themes don’t specify an optimum size, leaving me to work that out as best I can.

    So I’d like to understand how these images “work” and how to determine the optimum size and aspect ration – or is that just a matter of trial and error?Can anyone explain this for me please, or else point me to some documentation that explains it (I don’t even know what search terms to use)?

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

Viewing 1 replies (of 1 total)

  • If the theme outputs the header image as an img tag with CSS of
    img {max-width: 100%; height: auto} (this CSS is good to use for all images)
    then the browser will show the image at its natural size, but will make it smaller for smaller windows.

    If the theme outputs the header image as a div tag with CSS something like
    div.header-image {background-image: url(theimage); background-size: cover;}
    then the image will be adjusted to fit the size of the div.

    Some themes use something like .header-image img { width: 100%; } but this makes even small images as wide as their container, and so smaller images are upscaled by the browser and look blurry. This is not a good way to do it.
    My opinion is that it’s best for themes to use whatever image sizes already exist, since that’s the sizes that images are uploaded as.

    Since replaced elements (like images) don’t allow pseudo elements, then if the design has an overlay or anything, then it has to be nested into another element or used as a background image.

Viewing 1 replies (of 1 total)
  • The topic ‘Using large Header images’ is closed to new replies.