Section Background Position

[kerri]

I’m trying to improve the responsiveness of several background images, but can’t seem to get it right.

On mobile view, some of the images need to be positioned left, and some right. However, it seems I’m only able to do one or the other.

@media only screen and (max-width: 768px) {

.x-bg-layer-lower-image {
background-attachment: scroll;
background-position:left;
}
}

This code works for changing the positioning of ALL of the background images, but I’m wanting to do it only on specific sections. I’ve tried adding a custom class to the section and adding it to the media query, but no luck.

.x-bg-layer-lower-image .classname{
background-attachment: scroll;
background-position:left;
}
}

[mldarshana]

Hi There @kerridawn

Thanks for writing in! To target a section, first you need to assign a class to your section. In this example, I have used the class name my-custom-section.

Now you can use the following CSS rule to target that section (you can also wrap up with your media query).

.my-custom-section .x-bg-layer-lower-image {
    background-attachment: scroll;
    background-position: left !important;
}

Hope that helps.

[kerri]

Wow! I learned that order matters!

Before coming here, I did exactly what you suggested, but it didn’t work. When I changed the order of classes around, success! I didn’t know the order of class names was important.

Before: .x-bg-layer-lower-image .classname

After: .classname .x-bg-layer-lower-image

All good now, thanks!

[friech]

Hi @kerridawn,

Glad that sorted things out on your, that is not really the order of the class, but the HTML Hierarchy.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar

Cheers!