Adding a background image over a background color-DW Minion

Hello,
I was wondering if anyone could help me add an overlay on my background color. I used this code to change the entire color of my background:
<style>
#page,
.site-main,
.site-info {
background-color: #c6ce8c;
}
.site-title.display-logo img {
max-width: 100%;
}
</style>
I would like to add an image over top, with the green showing through. So I guess that means I would need to change the opacity of the image or somehow make it transparent. I also would like the body text in the center to remain a solid color and just have the background appear on the sidebars. I have not found a thread with this specific of a request.
Any help would be much appreciated!
Thanks!
Warm Wishes,
Elizabeth

2 Answers

Kido D
answered 10 years ago

Hi Elizabeth,

To change background color, please go to Dashboard / Appearance / Customize / Custom Code, and add this code to the Header Code section:

 <style>
/* Center the webpage */
.container {
margin: 0 auto;
}
/* Change background image*/
.site-main{
background: transparent
background-image: url('link_to_your_background_image');
background-size: cover;
background-attachment: fixed;
}
</style>

Hope that helps!

Elizabeth Sensky
replied 10 years ago

Nothing has changed when I tried this.

Kido D
replied 10 years ago

Hi, please add a semicolon after “background: transparent” in the code above and try again. Hope that helps.

Elizabeth Sensky
replied 10 years ago

That did something but it is very off. Please take a look: http://www.elizabethsensky.com

I’m not sure what happened. Do you have an idea?

Thank you for helping me through this!

Kido D
answered 10 years ago

Hi,

I checked your site and there was a mistake in the code:

So please remove all the old code, and add the new code below to Header Code section again:

 .container {
margin: 0 auto;
}
.site-info {
background: #c6ce8c;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.site-main {
background: #c6cc8c;
padding: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#page {
background-image: url('http://wallpapo.com/wp-content/uploads/tree-silhouette-free-download-wallpaper.jpg');
background-size: cover;
background-attachment: fixed;
}
@media (min-width: 1200px) {
.site-nav {
padding-top: 20px;
padding-left: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
}

Hope this helps!

Elizabeth Sensky
replied 10 years ago

Hi,

Thanks for your help again but it is still very off: http://www.elizabethsensky.com/

Jin
replied 10 years ago

Hi Elizabeth,

My apology for this late support. We have checked your site and apparently you are using other theme than our theme. Due to this, we could not check for the issue again.
If you still need our support, please send us your admin account (via private question) and a screenshot of the issue.
Thanks and regards,