Background Image

There are different ways to add a background image.

Add a background image through the Customizer

Go to the Customizer and add a Background image.
I adjusted to Fill Screen and Image Position top left.
The background image is seen in the header and footer area.

Customizer-Background-image

To remove the remaining white background. Check out the CSS. (Right click and select Inspect and look at the code.)
There are two places the white background is seen.
In the tm-main and the uk-panel-box classes. I adjusted these to become:

.tm-main {
   background-color: transparent;
}

.uk-panel-box {
   background-color: transparent;
}

The result on the frontend looks like this:

Beans-full-screen-background-image

Add a background image manually through CSS

Instead of adding a background image through the Customizer I added the following to the style.css.

body {
background-image: url('/wp-content/uploads/colorful-grunge-texture-17-copy.jpg') !important;
background-color: #fff;
background-repeat:no-repeat;
background-attachment: fixed; /* Comment out this line to make the image scroll with the content. */
background-size: cover;
background-position: 80% 80%; /* Adjust the height and width position. */
}

.tm-main {
background-color: transparent;
}

.uk-panel-box {
background-color: transparent;
}

 

To add multiple background images:
w3schools.com/Css/css3_backgrounds.asp

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *

Comment *
Name *
Email *
Website