Background Image is not displayed

Resolved Cepega
(@cepega)

8 years, 11 months ago

I’ve been fighting this issue for the longest time 2 yrs to no avail.
Looks like theme background color (black overrides the background image to be used. After a page loads you can see the image, but it is underneath the theme colors and is covered by the black background color of the theme. I would like to resolve this and have the image displayed and text on top of it, or have the image visible and have the background color to be transparent(adjustable) with text on top of it.

Thank you

Viewing 4 replies - 1 through 4 (of 4 total)

Theme Author nobita
(@nobita)

8 years, 11 months ago
Hi @cepega

I’ve been fighting this issue for the longest time 2 yrs to no avail.

If possible, please tell me your website

The display of the background image differs depending on the settings of the customizer.

For example
A typical case where background images are not applied

Setting　
Dashboard/Appearance/Customize/Presentation/Color Scheme set dark
and
Dashboard/Appearance/Customize/Presentation/Layout and Sidebars/Document Width set Full Width Responsive

In this setting, even if you set the background image with the customizer, the background image is not displayed.

However, you can display it with a little customization.

Dashboard/Appearance/Customize/Additional CSS
Add below style.
```
.safari #doc5,
.ie11 #doc5{
background:transparent;
}
#doc5{
background:unset;
}
#bd{
background:#070707;
}
```
result example

If you explain the details of the URL and how you want to reflect the background image, I will cooperate to solve it.

Thank you
- This reply was modified 8 years, 11 months ago by nobita.
Thread Starter Cepega
(@cepega)

8 years, 11 months ago

Hi,

Thank you for the reply. The page does looks similar to the picture you attached. The background image is behind the left hand side menu and body is not visible through the black background of the body and left hand menu sections, there is no opacity of the black color. I think it would looks great if the opacity level would be adjustable, this gives the floating affect and look really cool.
The very last one has an option for the background image looks like.
Here is the list of themes that have the affect I’m talking about:

https://wordpress.org/themes/adventure/

https://wordpress.org/themes/fashionbuzz/

https://wordpress.org/themes/haunted-house/

https://wordpress.org/themes/redesign/

https://wordpress.org/themes/seasonal/

Thank you
Theme Author nobita
(@nobita)

8 years, 11 months ago
your mean like this

Add Customize/Additional CSS
```
body .rsidebar,
body .lsidebar,
body div[id^="yui-main"],
body div[id^="doc"]{
    background:rgba(0,0,0,.2);
}
#bd .archives li{
    background:rgba(0,0,0,.5);
    padding:1em;
    box-sizing:border-box;
}
```
Are you approaching the customization you want to do?

Thank you.
Thread Starter Cepega
(@cepega)

8 years, 10 months ago

Hello,

Here I finally had some time to play around with the theme and its settings.

Here is what I did:

Clean installed WP locally on Win 7
Clean install of the Raindrops theme
Add Background image, asked to upload file, then set the picture background.
This worked great until I went and changed the “Color Scheme” under Colors from
“Minimal” to “Dark”. “Light” and “W3Standart” were hit or miss for some reason.

I then added the last piece of code you provided into raindrops: Stylesheet (style.css) found under “Editor” of “Appearance” section on the left hand side. The code was added all the way at the bottom of the code that already present in there, saved the changed and refreshed the page in other browser and the changes took effect. I totally missed the “Custom CSS” option because I exited the Customization menu, but I guess I’ll try to post the addition code in that section and remove it from aforementioned location at later time.

This seems to get me close to the final results I’d imagined to have with this theme.

Thank You Very Much for Great Help on this issue.