Background images not appearing (repost)

[elainesintherain]

Hello,

Sorry to repost. Was away for awhile.

I’m having trouble with my background images. For some reason when I add sections onto a page they completely block out the background image, even though they are set to be transparent.

You’ll see on my website Elainesintherain.com that all pages with content (such as the work pages) have no background, while blank pages (such as the actual page titled WORK) shows the background. (White strip appearing on page is a blank section.

On page settings I have all templates set to Blank - No Container Header, Footer. Which I thought was the source of my problem. What’s going on?

I was given a code to try and fix the problem and it did not work:

.entry-wrap {
background-color:transparent;

[Prasant]

Hello @elainesintherain,

Thanks for asking.

I checked the website and have narrowed down the code that’s causing the issue. To fix the same, please add following CSS under X > Theme Options > CSS:

.site {
    background-color: transparent !important;
}

To learn more about the various options that’s there in section, row and columns please take a look at following tutorial.

Creating Layouts | Themeco Docs

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[elainesintherain]

@Prasant

.site {
background-color: transparent !important;
}

Thank you!!! That is exactly what I needed.

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.