banner image gif responsiveness

  • Author
    Posts
  • #150391

    Hi,

    We have a gif image in the banner area on our landing page. I don’t know if there is a overflow issue or an image size max width thin but i need the banner logo gif to stay inside the container at all times and all sizes. Somehow it’s not responsive on screens. There is something I’m missing in the css. Could you please check our css and site and see if you could help us out?

    The blog I need help with is: (visible only to logged in users)

    #150587
    gogoarmstrong
    Member
    Original poster

    Any help regarding this?

    #150605
    themetrust
    Theme Author

    Hi,

    The video banner background is a full screen image. This means that it scales proportionally to fill the screen it is being displayed on. On a narrow screen such as a phone, the left and right sides will be cropped in order to maintain a height to fill the full screen vertically. If it scaled to fit the width of the screen only, you would see the bottom and top edges of your image.

    However, a little CSS can help you achieve what you want:

    
    #video-background {
    background-size: 1000px;
    background-color: #fff;
    }
    

    You can tweak it for different devices by using media queries.

    #150624
    gogoarmstrong
    Member
    Original poster

    Ah ok. Does it read like a video-bakground even though it’s a .GIF? Atm it does not fit in any setting or screen?

    #150625
    gogoarmstrong
    Member
    Original poster

    When looking at our CSS any advice on how to handle this situation with media queries?
    Or if not, any good tips or guides to solve the situation?

    #150659
    themetrust
    Theme Author

    If you wanted to make it even smaller on tablets and phones, you can use this:

    
    /* tablet */
    @media only screen and (max-width : 1036px) {
    #video-background {
    background-size: 800px !important;
    }
    }
    
    /* phone */
    @media only screen and (max-width : 700px) {
    #video-background {
    background-size: 500px !important;
    }
    }
    
  • The topic ‘banner image gif responsiveness’ is closed to new replies.