Archived topic

Change section background image on different viewports.

4 replies · Started by Max on September 28, 2017

Viewing posts 1–5 of 5

September 28, 2017 at 9:34 pm #393981

Hey Tom and Leo

I need to display a different background image in a section depending if site is viewed in mobile, tablet or fullscreen.

I am already familiar with the @media breakpoints.

I just need to know what css to use to identify a specific section background image.

Thanks for your kind assistance.

Regards

Max

September 28, 2017 at 9:53 pm #393985

I have come up with this.

Is it correct?

@media (max-width: 768px) {
    #generate-section-6 {
    background-image: url('https://mywebsite.com/wp-content/uploads/2017/09/myimage-1920-1080.jpg') !important;
}}

Thank you for your assistance.

Max

September 28, 2017 at 10:05 pm #393992

Yep - that works. You can give the section a custom class or ID as well so you don't need to use #generate-section-6

September 28, 2017 at 10:06 pm #393994

Thanks

September 28, 2017 at 10:27 pm #393999

No problem!

This archived topic is closed to new replies.

Start building better websites today.