Top banner | Center Y+X

[vulkanus]

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

[Paulie_D]

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

[vulkanus]

@Paulie_D

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

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

Thank you.

[Paulie_D]

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.

[vulkanus]

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.

[Author]

Posts