Change Background Color

Support
#1

Hey Guys,

How do I change the background color for normal pages? I want this page http://c02.847.myftpupload.com/airports/ to either have another color, or an image background. When I add an image from the page settings it is only visible behind the sidebar. And I did change the background color of the entire site from customizer but nothing happened there either.

Thanks!
Ann

Hi – So I was able to add this to change the color;
.x-container.main:before {
background-color: hsl(210, 3%, 13%) !important;
opacity: .8;
}

But that wouldn’t carry over to mobile so assuming that is incorrect?

#2

Hi there,

Thanks for posting in.

The CSS is working on both desktop and mobile. It applies 80% transparency and the background image is there. Would you mind providing a mockup design of your preference?

Thanks!

#3

It is not working on mobile for me. When I look at the pages on mobile the background is completely transparent.

If I make my desktop screen smaller it does work, but if I actually view it from my mobile device it does not.

Can you see it on mobile device?

#4

Hi again,

I checked in an android device and I can see the background image, I also tested in iPhone emulator and background is displaying just fine. Please clear your mobile device’s cache and check the site again.

Cheers!

#5

Ohh I’m sorry, I may not have been all clear. The image is there, yes. What I’m having issues with is the dark overlay I added to the section - no the sidebar. Are you seeing that dark color? The screenshot attached should have that dark overlay.

Thanks!
Ann

#6

Hi there,

Ah, it’s the CSS you applied

.x-container.main:before {
    background-color: hsl(210, 3%, 13%) !important;
    opacity: .8;
}

Is it intended for desktop only? Then you may change it to this

@media ( min-widthL 980px ) {
.x-container.main:before {
    background-color: hsl(210, 3%, 13%) !important;
    opacity: .8;
}
}

Hope this helps.

#7

Hmmm no, that didn’t work. It made it white again. Any other ideas? :slight_smile:

Thanks!

Ann

#9

Sorry the code had a typo, kindly use this code:

@media ( min-width: 980px ) {
.x-container.main:before {
    background-color: hsl(210, 3%, 13%) !important;
    opacity: .8;
}
}

Thank you.

#10

Nope, still not working :frowning:

#11

Hi again,

Can you please replace the code with this:

@media screen and (max-width: 979px) {
    .x-container.main:before {
        background-color: transparent;
        opacity: 0;
    }
}

If this doesn’t work then can you please share some screenshots of what you’re trying to achieve so we can take a closer look?

Thanks!

#12

That made it white again. I basically just want that column to be dark with a bit of opacity, If the opacity is not possible, then at least a darker color than white.

I added some screenshots… Hope it makes sense.

Thanks!
Ann


#13

Hi Ann,

Please update your CSS code to this:

.x-container.main:before {
    	background-color: rgba(0, 0, 0, 0.5) !important;
}

The 0.5 is the transparency value (0.0 - 1.0) adjust it where you see it fits.

Cheers!

#14

That will still not work on mobile. It’s not a big deal though. I swapped out to another image where you can see the text better.

Sorry for the hassle!

Thanks!

Ann

#15

Hi Ann,

The CSS is working, it’s just the combination of background-image and background-color is too dark. You can make the background-color completely transparent on mobile:

/*reset the background-color to transparent on mobile*/
@media (max-width: 768px) {
	.x-container.main:before {
    	background-color: transparent !important;
	}
}

But yes, changing/editing the background-image might be your best option since that image has a dark mask in it.

Have a great day,
Cheers!

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.