Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Full width header responsive image, with left & right overflow

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #206565
    tomascrespo
    Participant

    I want to place a full width image (somethink like a header or slider) but I want to show only the center of the image, UNLESS the viewport would be so big than the image had to be enlarged.

    Some detailed examples:

    My image is 2000x200px
    * In a screen of 1600px width I want to show the central 1600px of my image, no resize.
    * In a screen of 450px I want to show the central 1600px of my image, but shrink (resized-down)
    * In a screen of 1900px I want to show the central 1900px of my image, no resize.
    * In a screen of 2500px I want to show the full width 2000px of my image, of course, enlarged.

    What I have so far:

    • Make a responsive image is quite easy
    #header-img {
      width: 100%;
      height: auto;
    }
    

    But it always shows the full image. There are a left and a right chunk I don’t want to show unless the resolution of the client screen would be really big.

    • On the other hand, get the “overflow” behaviour could be done setting the image as background of a div, and setting his background-size property to cover, but it’s not responsive.
    <div style="background-image: url(header.jpg); background-size: cover; background-position: center; height: 200px" />
    

    I need the two behaviours. Perhaps I need media-queries, but I’m trying to avoid it. I don’t want any javascript code neither, only CSS.

    I have seen this behaviour in some pages, but I can’t find any at the moment.

    A picture speaks a thousand words
    Alt

    Observe that numbers 7 and 8 are only showed in ultra wide screen

    #206566
    Beverleyh
    Participant

    I’m currently on mobile so excuse the lack of code examples…

    Re: your background-size:cover; height:200px; problem…

    Instead of setting an explicit height, try padding-bottom set as a percentage. This will give the div relative height that will scale with a changing (responsive) container width.

    The calculation for the paddings-bottom % value;

    image height in pixels / image width in pixels x 100

    You’ll still probably need to use a few media queries to tweak the size/behaviour at critical breakpoints (when the image looks iffy) but it will give you something else to add to your RWD arsenal :)

    BTW, have you heard of using stacked media queries to server smaller background-images to mobile and bigger ones to desktop? It can help with page weight at small screen sizes. Plus you can manipulate the breakpoints to resize heavily compressed/optimised images down to double-pixel density for retina screens. Crispy sharp and lightweight – mmmmm, my fave! The padding-bottom, stacked MQ and retina image techniques are all briefly covered here http://www.dynamicdrive.com/forums/entry.php?315-RWD-Cross-Fade-Slideshow-with-Retina-Images – ignore the slideshow, but the other stuff seems quite fitting to your needs.

    #206606
    tomascrespo
    Participant

    The padding-bottom: % solution is not bad, but it’s not enough. I will try with some media-queries.

    However the link you gave me is quite interesting. I think I will go with that.

    Lot of thanks

    #206737
    kwerty
    Participant

    Hi,

    This is just a demo, in case this is what you are looking for. Set the parameters according to your needs.

    http://codepen.io/anon/pen/EjzqEd
    

    Thanks.

    #240759
    helmuc
    Participant

    @kwerty thank you – works as a charm.

    all the best,
    H

    #243885
    drupopuppis
    Participant

    @kwerty Fast and effective, many thanks.

    #243918
    josh
    Participant

    @helmuc, I just want to second the use of padding-bottom and a percentage as suggested by @Beverleyh. It’s the best way to handle responsive images.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.