Forums

Give help. Get help.

  • # October 31, 2017 at 5:55 am

    Hi Everbody,

    Can anyone help me to center a banner in a responsive way. I need to inside a container, center the image on position Y and X according resolution and preferably fill without stretch the image.

    I have this:

    ps: ignore size image, maybe max.: 950px

    CSS:
    .headerbanner-container {
    max-height: 400px;
    overflow: hidden;
    margin-top: 100px;
    }

    .wrapper {
    clear: both;
    min-height: 100%;
    background-position-y: 50% !important;
    position: relative;
    margin: 0;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    background-size: cover;
    margin-top: 100px;

    }

    Thank you
    Best regards

    # October 31, 2017 at 6:12 am

    Could you make a Codepen.io demo…it would be of much more use that a random snippet of CSS.

    # October 31, 2017 at 9:12 am

    @paulie_d

    I haved put here the code, but, disappeared :(

    go ahead: https://codepen.io/anon/pen/yPNPom

    Thank you.

    # November 1, 2017 at 5:40 am

    I’m really not clear on what it is you are trying to do.

    The banner is centered (especially as it’s 100% wide)…

    As for the background image you have this set to cover so naturally it stretches.

    You might try contain but without seeing what this is supposed to look like it’s hard to comment.

    # November 4, 2017 at 12:59 pm

    Paulie_D,

    With contain doesn´t work well, but with the cover stays better. Anyway, I put a background-position center center and change a little bit the .wrapper, now it´s fine.

    Thank anyway.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag