Forums

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

Home Forums CSS Responsive banner image

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #175002
    whit
    Participant

    I’m attempting to create a responsive banner of a shop front for a website
    Link

    However the image is either too squashed or too zoomed in. What should I do?

    Edit To clarify i need the shop front to be visible on all screen sizes , this is the class i am currently using .

    `.splash {
    

    background: url(../img/headers/shopfront2.jpg) no-repeat center top;
    margin-top: 0px;
    padding-top: 60px;
    text-align: center;
    background-attachment: relative;
    background-position: center center;
    min-height: 480px;
    width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    /* background-size: cover; */
    }`

    #175061
    shaneisme
    Participant

    If you aren’t happy with how the image looks at certain resolutions, re-cut the original to more closely fit and create some breakpoints to change out the background-image on your element.

    For instance:

    @media only screen and (max-width:40em) {
      .splash {
        background-image: url('../img/headers/shopfront-small.jpg');
      }
    }
    

    You could also do the same thing with the newer picture element syntax, and then use the Picturefill polyfill to support older browsers.

    #175062
    whit
    Participant

    Isnt that adaptive instead of responsive? , I may have solved my problem by using the built in bootstrap gallery with one item. With the solution you suggested the problem is that i dont know what resolution to make the picture to begin with , then do i set my min-height to its hight ? and switch the images at the break points?

    #175090
    shaneisme
    Participant

    What resolution to make the image depends on where it looks weird. It just takes a little trial and error.

    Using min-height is just there as a safety net to make sure it doesn’t break on the edge cases. I wouldn’t rely on that as the key ingredient to switch during a break point.

    #175092
    whit
    Participant

    Is there a solution that doesn’t involve multiple images? I think I fixed it with using the gallery this is just for best practice reference.

    #175094
    shaneisme
    Participant

    Sure, if your image is large enough, you can just focus in on where you want to focus using background-position while adjusting the box size (eg. height, width, etc). You can “zoom in” or “zoom out” using background-size as well.

    Sometimes, though, it’s best to use multiple images – it just depends on the needs of your content :)

    #175096
    whit
    Participant

    Usually I don’t have a problem but it seemed no matter what the image was just too zoomed in and I wanted to be able to see the whole shop front, the single item carousel seems to have provided a semi decent solution.

    #175099
    shaneisme
    Participant

    Glad you got it working.

    I guess the moral of my story is: there’s no right way to do it.

    If it’s important content, make sure it’s viewed well by all. If it’s just pretty content, you can take liberties with it.

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