Add Background Image To Widget Area Using CSS

Add Background Image To Widget Area Using CSS

Author: WP Sites

Date: October 25, 2018 

Category: Theme development, Tips and tricks, Tutorials

(advertorial)

wprssaggregator Add Background Image To Widget Area Using CSS

This CSS enables you to add a background image to any widget area in any theme.

In this case the image has been uploaded to the WordPress Media Library however, you can also upload the image file to your child themes images folder and use this method :

.front-page-2 { background-image: url(‘https://wpsites.net/wp-content/uploads/2018/10/hero.jpg’); background-color: #cccccc; height: 500px; background-position: center; background-repeat: no-repeat; background-size: contain; }

Assumes your main widget area class is front-page-2 otherwise swap that out to match your widgets container class.

CSS Installation #

Swap out the URL to your background image in the above CCS rule

This is the first part of the original article by WP Sites.
Click here to read the full article in a new tab!

(advertorial)

toolset logo tag line white Add Background Image To Widget Area Using CSS

Add Background Image To Widget Area Using CSS

World of WordPress is hosted by:

Servebolt: next level high performance hosting.

While others try to add more components to their hosting to make it go faster, we decided to build our hosting cloud fast from the ground up. We did so by stripping out everything we knew was deadweight.