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
  • #175002

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

    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; */


    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.


    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?


    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.


    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.


    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 :)


    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.


    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.