This post includes 2 solutions:
- The 1st solution provides CSS code you can use in your child themes style.css file to display a background image which covers 50% of any page.
- The 2nd solution provides CSS code which uses 2 images. One to cover the background of the left half and the other to cover the right half.
Both examples use the .home page class.
One Half Background
.home {
background-image: url('images/image.png');
background-repeat: no-repeat;
background-size: 50% 100%;
}
Example of what the CSS above generates:
Left & Right Background Images
Use this code to display 2 different images. One which covers 50% of the page and the other which covers the other half of the page:
.home {
background-image: url('images/left-half.png'), url('images/right-half.png');
background-repeat: no-repeat, no-repeat;
background-size: 50% 100%;
background-position: left top, right top;
}
Example of what the CSS above generates:
Both snippets assume you have uploaded your images to your child themes images folder and the image file names and extensions match whats in the CSS.
Was This Tutorial Helpful?