Archived topic
Proportional Images Within Scaling Elements
4 replies · Started by Garth Dryland on May 25, 2016
Hey Tom
I'm having trouble working out how to make proportional images within scaling elements.
If I add a background-image to (for example) the .site-footer or .footer-widgets element(s) I need to add the height onto the element spacing (or via CSS as shown below) so when I scale down by reducing my window in size (or to tablet and mobile mode from within customise etc) the image scales down but the element doesn't so I end up with what could be described as white space under the image. If I don't add the pixels to set the image height the image often doesn't show at all. It may show in mobile views but not at all in desktop.
/* Footer Widgets */
.footer-widgets {
background-image: url(/wp-content/uploads/2016/05/img15.jpg);
height: 315px; /* If I set this to auto the image more often than not does not show or show in full */
width: auto;
background-position: left top;
background-repeat: no-repeat;
}
In other words I can get the image to re-size but not in conjunction with the size of the element which remains the same size as the full size image given the height setting (or element spacing setting) used to get the image to show completely across all viewing sizes.
Is there some other CSS or a function I can use to manipulate the size of the element as the image changes in size so they work in conjunction with each other or to set the image height in any other way that allows for proportional scaling in conjunction with the element?
I would expect this has to be doable but I can't work it out. What am I missing ? Any ideas ?
Cheers
Garth
Hmm, background images are typically meant to be coupled with content in the area to create the height of the element.
One thing you can try is adding background-size: cover; to the element which should stop the white space.
Hi Tom
I tried that previously (but forgot to include above) and I just checked it again. While it provides the best outcome so far its still not how is really needs to be. I may have to flag this design. I had it sweet when viewing via desktop but it really isn't a good look via mobile as the footer is far to large and somewhat distorts in appearance.
Pretty sure I could get this theme finished if it wasn't for this footer issue.
Cheers anyway
You can always change things up on mobile using media queries:
@media (max-width: 768px) {
/* mobile styles in here */
}Okay Tom
I'll have a look and see what css I can find to re-size and or completely remove the .site-footer and or .footer-widgets elements when under 768px. I know I can remove header easily from within in menu plus mobile options. I assume that also happens at 768px. So I will go and do that first and check the code out and see if I can apply similar code to the footer.
Cheers