Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Then you need to use JS to detect the person’s screen size and give the element with the background a min-height of that size.
Thank you for that, Andrew. Since I don’t know JS, do you happen to have an example you could share?
*Scratch that…Andrews would be better suited, because in my example, the image would not resize with the window size.*
(Edited)
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
$ = jQuery;
$windowHeight = $( window ).height();
$target = $( '.your-class-example' );
$( document ).ready( function() {
//Apply the min-width to your element
$target.css( 'min-height', $windowHeight + 'px' );
});
$( window ).resize( function() {
$windowHeight = $( window ).height();
//Apply the min-width to your element
$target.css( 'min-height', $windowHeight + 'px' );
});
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Thank you Andrew for the JS, and Endlyss for the CSS idea (which I got in my email reply). I did try the CSS option, and the resizing did look wrong. I did change the 100% value to 50%, which looked okay for the particular page I’m working on. But, I’ll investigate Andrew’s suggestion some more. Maybe I’ll be able to modify the “Background Manager” plugin that I use.
Best,
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Sigh, the comments in my code should be:
//Apply the min-height to your element
