CSS Code to Add Image Which Covers Half of Page Background

This post includes 2 solutions:

1. 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.
2. 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.

Related Tutorials

• Overlay Text on Half of Background Image