I've been struggling to resize a background image on my Square space website dynamically based on the user's browser window size. If the window width drops below a certain point, I want the image to adjust accordingly while maintaining its aspect ratio.
This issue seems to be quite common and despite hours of searching for a solution, I can't seem to find one that works. I've tried implementing JavaScript to handle this task but so far, it has not been successful.
It's worth mentioning that I'm looking for a solution that goes beyond fluid resizing using percentage values.
After conducting a quality validation on the code with no syntax errors returned, I feel stuck at this point.
I added the following jQuery script into the header of the page:
$(document).ready(function() {
function imageresize() {
var contentwidth = $(window).width();
if ((contentwidth) < 1500) {
$(".widescreen").attr("height", "480px");
} else {
$(".widescreen").attr("height", "768px");
}
}
imageresize(); //Triggers when document first loads
$(window).on("resize", function() {
imageresize();
});
});
.widescreen {
background: url(https://i.imgur.com/96pxGnd.jpg) center top no-repeat;
background-size: cover;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
height: 768px;
/* Trying to change this value so the rest of the CSS adjusts accordingly */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>