[Jared WParticipant]

Hello there,

I am trying to setup a header image that behaves responsively. Currently, when I reduce the screen size, the header image’s height gets too small because the image is scaled proportionally by width. When I apply a min-height to the image, the image gets scrunched up horizontally. Ideally, I would like to apply a min-height and keep the image centered and proportioned by cropping the sides of the image as the screen size is reduced. To do that, I have applied the following CSS:

To the Cornerstone text element, I have applied,
{text-align:center; overflow:hidden;}
To the , I have applied,
{width:100%; height:100%; min-width:1920px; min-height:200px; position:relative; left:100%; margin-left:-200%;}

This works great, but for some reason when the screen width is reduced to around 640px, the image loses its center justification. I’m wondering if the theme could be interacting with the image in a way that is causing this.

http://flautogroup.wpengine.com/parts

Thanks.

[LelyModerator]

Hello Jared,

We can achieve what you want by adding the image as background to the column.
Please use this CSS:

.header-bg-col {
    width: 100%;
    height: 100%;
    min-height: 200px;
    background-image: url(http://flautogroup.wpengine.com/wp-content/uploads/2016/03/forest-lake-auto-group-parts-mn-hd-01.jpg);
    background-size: cover;
    background-position: center;
}

Then please remove the text element with the image element inside. Add just a GAP element inside the column. Also remove this CSS:

img.header-bg-img {
    width: 100%;
    height: 100%;
    min-width: 1920px;
    min-height: 200px;
    position: relative;
    left: 100%;
    margin-left: -200%;
} 

Forcing height will definitely stretch the image.
Hope this helps.

[Jared WParticipant]

I would really prefer to use an img rather than a background image so that I don’t have to edit the CSS for every page that I create. Is there any way we can use an img instead of a background image? The CSS that I used works fine until it gets to ~640 px in screen width.

[FriechModerator]

Hi There,

Add a CSS min-width: 0; min-height: 0; to your image, to keep it responsive.

Hope it helps, Cheers!

[Author]

Posts