Header image

  • Resolved gulliver

    (@gulliver)


    12 years, 1 month ago

    Is there a way to have the header image fully scale rather than crop?

    I believe ‘background-size: contain;’ will handle that, but the image is then not full width on larger resolutions (perhaps because of the ‘section-inner’ class?).

    And using ‘background-size: 100% auto;’ on smaller resolutions a dark band appears above it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Anders Norén

    (@anlino)

    12 years, 1 month ago

    Hi gulliver,

    I’m not sure what you mean with fully scale. Since the header doesn’t have a fixed aspect ratio (the relation between the height and width fluctuates depending on the width of the browser), there’s no way to display all of the header image at all times. For the image to cover the entire header, some of the header image has to be cropped at some resolutions.

    Thread Starter gulliver

    (@gulliver)

    12 years, 1 month ago

    Thanks.

    I’d posted before fully understanding the css cover/contain behavior, and I then got further confused when narrowing the browser to see the effect of the media queries – noticing how the image became initially cropped and then on further narrowing changed again so that more of it was shown before then becoming cropped again.

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

The topic ‘Header image’ is closed to new replies.