Skip to main content

Forums

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

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #262082
    vulkanus
    Participant

    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

    #262083
    Paulie_D
    Moderator

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

    #262096
    vulkanus
    Participant

    @Paulie_D

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

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

    Thank you.

    #262128
    Paulie_D
    Moderator

    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.

    #262208
    vulkanus
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.