Thank you very much, Mike. That did the trick: I didn’t realize I could access the srcset field in img like that, doh! So now I know how to do that, for the situations I need it.
And the situation came up immediately, as I ended up changing my method of doing this home page banner, to use the second method I mentioned, putting my background graphic into the Color Section, and my happy couple image in an Image media element in that Color Section, and then making it all responsive, including using your querySelector with src & srcset to swap out the happy couple images responsively at certain breakpoints, and using it again with backgroundImage to swap out my background graphic at the same breakpoints. Yes, it may seem weird that I’m swapping images manually instead of using srcset, but it was all necessary at these breakpoints (or I’m just not experienced enough to have figured it out). It all worked out nicely.
I even answered my own question about that blue bar under the banner: I totally forgot that WordPress makes background images default to repeating, so I just had to turn repeat off.
Thanks again for all your help! You can close this thread if you wish. /gary
Here’s the final code in case others are interested:
In child theme’s function.php:
function displayHomeBanner() {
if (window.matchMedia("(min-width: 1px) and (max-width: 579px)").matches) {
// BG GRAPHIC:
document.querySelector(".seniorCoupleContainer").style.backgroundImage="none";
// COUPLES PIC:
document.querySelector(".seniorCouple img").src="...happy-senior-couple-5-556x313px.png";
document.querySelector(".seniorCouple img").srcset="...happy-senior-couple-5-556x313px.png";
}
if (window.matchMedia("(min-width: 580px) and (max-width: 819px)").matches) {
// BG GRAPHIC:
document.querySelector(".seniorCoupleContainer").style.backgroundImage="url('...home-page-banner-background-4-1079x300px.png')";
document.querySelector(".seniorCoupleContainer").style.backgroundSize="1079px 300px";
document.querySelector(".seniorCoupleContainer").style.backgroundRepeat = "no-repeat";
// COUPLES PIC:
document.querySelector(".seniorCouple img").src="...happy-senior-couple-4-510x287px.png";
document.querySelector(".seniorCouple img").srcset="...happy-senior-couple-4-510x287px.png";
}
if (window.matchMedia("(min-width: 820px) and (max-width: 989px)").matches) {
// BG GRAPHIC:
document.querySelector(".seniorCoupleContainer").style.backgroundImage="url('...home-page-banner-background-3-1439x400px.png')";
document.querySelector(".seniorCoupleContainer").style.backgroundSize="1439px 400px";
document.querySelector(".seniorCoupleContainer").style.backgroundRepeat = "no-repeat";
// COUPLES PIC:
document.querySelector(".seniorCouple img").src="...happy-senior-couple-3-700x394px.png";
document.querySelector(".seniorCouple img").srcset="...happy-senior-couple-3-700x394px.png";
}
if (window.matchMedia("(min-width: 990px) and (max-width: 1199px)").matches) {
// BG GRAPHIC:
document.querySelector(".seniorCoupleContainer").style.backgroundImage="url('...home-page-banner-background-2-1778x500px.png')";
document.querySelector(".seniorCoupleContainer").style.backgroundSize="1778px 500px";
document.querySelector(".seniorCoupleContainer").style.backgroundRepeat = "no-repeat";
// COUPLES PIC:
document.querySelector(".seniorCouple img").src="...happy-senior-couple-2-871x490px.png";
document.querySelector(".seniorCouple img").srcset="...happy-senior-couple-2-871x490px.png";
}
if (window.matchMedia("(min-width: 2000px)").matches) {
// BG GRAPHIC:
document.querySelector(".seniorCoupleContainer").style.backgroundImage="url('...home-page-banner-background.png')";
document.querySelector(".seniorCoupleContainer").style.backgroundRepeat = "no-repeat";
document.querySelector(".seniorCoupleContainer").style.backgroundSize="2881px 601px";
// COUPLES PIC:
document.querySelector(".seniorCouple img").src="...happy-senior-couple.png";
document.querySelector(".seniorCouple img").srcset="...happy-senior-couple.png";
}
}In child theme’s style.css:
.seniorCoupleContainer {
background-image: url(https://www.clearlightcomputing.com/denture6/wp-content/uploads/2023/05/home-page-banner-background.png);
background-repeat: no-repeat;
background-size: 2881px 601px;
max-height: 591px; /* Without this there is an inexplicable bottom padding (zeroing margin and padding does nothing): height of senior pic 576 + reset top 35 = 611, but this still leaves a 20px bottom padding. */
}
.seniorCouple {
top: -35px;
}
/* Get rid of the bottom padding at all these breakpoints because it accummulates between the breakpoints, so this code sort of does a reset of 0 padding: */
@media only screen and (min-width: 1px) and (max-width: 349px) {
.seniorCoupleContainer {
max-height: 171px;
}
}
@media only screen and (min-width: 350px) and (max-width: 369px) {
.seniorCoupleContainer {
max-height: 185px;
}
}
@media only screen and (min-width: 370px) and (max-width: 389px) {
.seniorCoupleContainer {
max-height: 199px;
}
}
@media only screen and (min-width: 390px) and (max-width: 409px) {
.seniorCoupleContainer {
max-height: 213px;
}
}
@media only screen and (min-width: 410px) and (max-width: 429px) {
.seniorCoupleContainer {
max-height: 227px;
}
}
@media only screen and (min-width: 430px) and (max-width: 449px) {
.seniorCoupleContainer {
max-height: 241px;
}
}
@media only screen and (min-width: 450px) and (max-width: 469px) {
.seniorCoupleContainer {
max-height: 255px;
}
}
@media only screen and (min-width: 470px) and (max-width: 489px) {
.seniorCoupleContainer {
max-height: 267px;
}
}
@media only screen and (min-width: 490px) and (max-width: 519px) {
.seniorCoupleContainer {
max-height: 284px;
}
}
@media only screen and (min-width: 520px) and (max-width: 549px) {
.seniorCoupleContainer {
max-height: 299px;
}
}
@media only screen and (min-width: 550px) and (max-width: 579px) {
.seniorCoupleContainer {
max-height: 313px;
}
}
@media only screen and (min-width: 1px) and (max-width: 579px) {
.seniorCouple {
top: -50px;
width: 564px; /* without this it's smaller for some reason */
}
}
@media only screen and (min-width: 580px) and (max-width: 819px) {
.seniorCoupleContainer {
max-height: 302px; /* Get rid of bottom padding. */
}
.seniorCouple {
width: 510px; /* without this it's smaller for some reason */
}
}
@media only screen and (min-width: 820px) and (max-width: 989px) {
.seniorCoupleContainer {
max-height: 409px; /* Get rid of bottom padding. */
}
.seniorCouple {
width: 700px; /* without this it's smaller for some reason */
}
}
@media only screen and (min-width: 990px) and (max-width: 1199px) {
.seniorCoupleContainer {
max-height: 505px; /* Get rid of bottom padding. */
}
.seniorCouple {
width: 871px; /* without this it's smaller for some reason */
}
}
@media only screen and (min-width:2000px) {
.seniorCoupleContainer {
width: 100% !important;
height: 591px;
max-height: 591px; /* Get rid of bottom padding. */
}
.seniorCouple {
width: 1024px;
}
}