Situation :
- There is an existing Wordpress site with an old theme that does not allow changing the header image.
- To work around this limitation and display a different image on a specific page, I have hidden the header image using CSS and replaced it with a responsive background image.
Task :
- However, I had to define a height for the area to accommodate the background image at full size by using "padding-top". This setup results in a large space beneath the background image when the window is resized or viewed on mobile devices.
- Is there a way to make the space below the image shrink as the image shrinks?
URL:
Custom CSS Used:
.singular-page-691 #header img {
display:none;
}
.singular-page-691 #branding {
padding-top:390px;
background-image:url(http://www.annareynolds.org/wp-content/uploads/2018/08/love-hobart-crop.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position:top left;
}