page header image stretches...

HI there - I have put images on all the secondary pages as per your code - but at different screen sizes the image skews out of proportion - stretched

code used so far:

.header_container.not_home{
background: url(http://www.burrowawelshcobstud.com/wp-content/uploads/2014/08/Burrowa-Welsh-Cob-Stud.jpg);
}
.header_container.not_home{
background-size:100% 100%;
}

Thank you so much - I love this theme

 

Hi nicolev
Remove your code and
Use the following:

Code:

.header_container.not_home{
background: url([URL]http://www.burrowawelshcobstud.com/wp-content/uploads/2014/08/Burrowa-Welsh-Cob-Stud.jpg[/URL]) no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Thanks
PankajK

 

HI PankajK - thank you! - I did need to delete the and bits for it to work though...

One other thing that would be great - could the height also adjust so it is not cropped off at larger sized screens. In other words - dimensionally can the image stay 100% height and width, without stretching.

 

Hi Guys,

Could the header image height also adjust so it is not cropped off when on larger sized screens. In other words - dimensionally can the image stay 100% height and width, without stretching.

 

Hi nicolev
Unfortunately it's not possible to maintain the aspect ratio if with a 100% height and width, when using background image. Here you can see the height of the header depends on header content.
If you set the background width to 100%, the image will only cover half of the container, in order to maintain aspect ratio.
However you can still try this and see if it works for you.

Code:

.header_container.not_home {
min-height: 316px;
}

Thank You
PankajK