Different Background Image for Small Screens

[Shan_HBG]

Hello!

My background image completely disappears on smaller screens. I was trying to fix this by pointing to a different image for mobile, and it sort of works, but it creates a few problems. (1) For some reason, my formatting changes on my footer text, changing from san-serif, black text to serif, blue text; and (2) The Google ReCAPTCHA badge that I have hidden with CSS reappears! It’s so weird, because these things don’t seem related to me.

I was using this CSS:
@media (max-width: 480px) {
.backstretch {
background-image: url(‘https://iamshannonlove.com/wp-content/uploads/2019/02/MoonMagic_480max.png’) !important;
}

Can you please help me? Thank you.

[friech]

Hi @Shan_HBG,

Thank you for writing in, Yes, the footer text and ReCAPTCHA has nothing to do with your custom CSS, unless the custom CSS for text and ReCAPTCHA in caught up inside the @media (max-width: 480px) that means those CSS rule will only take effect on mobile.

Which is possible because I see you’re missing a closing bracket } for your media query. Please update your code to this.

@media (max-width: 480px) {
.backstretch {
		background-image: url('https://iamshannonlove.com/wp-content/uploads/2019/02/MoonMagic_480max.png') !important;
	}
}

Hope it helps,
Cheers!

[Shan_HBG]

Ah! The missing bracket. I bet that’s what was messing it up. Ha! I copied it from another thread in the forum … not sure if I copied the error or messed it up on my end. Thank you!

One more question, are there attributes that I can include in this code to help with how the graphic is positioned? I want the bottom of the image to sit at the bottom of the screen. It was sinking such that most of the image was cut off (sinking well below the screen area).

Also, how did you put the code in your reply in a white box? I couldn’t figure out how to do that in my question!

Thank you.

[Prasant]

Hello @Shan_HBG,

Thanks for updating the thread.

You can play with background position CSS property to position the background position as per your requirement. For more information, please take a look at following resource. https://www.w3schools.com/cssref/pr_background-position.asp

@Shan_HBG

how did you put the code in your reply in a white box? I couldn’t figure out how to do that in my question!

I have recorded a screencast that you can take a look.

Thanks.

[Shan_HBG]

Thanks Prasant,

This link and screencast are helpful.

I appreciate it.
Shannon

[Shan_HBG]

Hello, one more question on this topic …

When I resize my computer’s browser window to be as small as possible, I can see my main/full-sized background image AND the mobile-sized (480px or less) background image.

Is there CSS that I can use to establish breakpoints so that only one background image can show at once? My current CSS looks like this:

@media only screen and (max-width: 480px) {
.backstretch {
background-image: url('https://iamshannonlove.com/wp-content/uploads/2019/02/MoonMagic_480max.png');
background-position: 0% 60%;
}
}

Thank you,
Shannon

[ruenel]

Hello @Shan_HBG,

You can use this code:

@media only screen and (max-width: 480px) {
  .backstretch img {
    opacity: 0;
  }
  
  .backstretch {
    background-image: url('https://iamshannonlove.com/wp-content/uploads/2019/02/MoonMagic_480max.png') !important;
    background-position: 0% 60%;
  }
}

The code were inserted inside a white box by utilizing the markdown for code.

• https://www.markdownguide.org/basic-syntax/#code

Hope this helps.