Widget Background Image

[Ellen]

Is there an easy way to have a background image instead of a color in a widget area? I would like to have a tiled background image in the call to action and announcement widget areas.

I made changes to my child style sheet, but the element.style is overriding it. I can’t seem to find where this is coming from.

[Sushil Adhikari]

Hi Ellen,

You can use this css to add background image in call to action and announcement widgets areas.

//background image in call to action area
aside#pref-cta {
	background: url( ' Place your Image URL here ' );
	background-repeat: no-repeat;
}

//background image in announcement widget areas

#pref-announcement {
	background: url(' Place your Image URL here ' );
	background-repeat: no-repeat;
}

To retrieve image URL please follow following steps:
1> Go to dashboard-> Media :
2> Click on image you want to show in widgets areas.
To the right of image you will find URL field and copy that image url and placed it inside your Url field in above css.

Note: Please use child theme to add custom css, otherwise your changes will be lost on theme update.

Thanks.

[carsten andersen]

I have the same problem, but where will the code go in?

I would like to either make a green colour beyond the right widget or put a “picture” same colour..

Website is ugeavisen-syd.dk/x

[Sushil Adhikari]

Hello anderson,

You should put the css inside your child theme’s style.css file or inside the Additional css section of you Customizer.
Regarding the issue I’m afraid it is quite not clear.Please refer to the above css support and try once or else provide some image attachments of the changes you want to make.

Hope to hear from you!

Best Regards,
Sushil

[carsten andersen]

I would like to bring a colour (e.g. a picture) on the right widget… See picture attached.

I found this in your answer, but where can I put it, to make it work..

//background image in announcement widget areas

#pref-announcement {
background: url(‘ Place your Image URL here ‘ );
background-repeat: no-repeat;
}

[carsten andersen]

Like in the linked picture…

[carsten andersen]

http://ugeavisen-syd.dk/x/wp-content/uploads/2017/08/Hjemmeisde-forside..jpg

[Sushil Adhikari]

Hello Carsten Andersen,

Please add the following css inside your child theme’s style.css file:

/** background-color **/
aside#pref-right{
	background-color:#000000;
}

/** background-image **/
aside#pref-right{
        background: url('Place your Image url here');
}

Note: You can change the background-color of your own.
Please let us know .

Best Regards,
Sushil

• This reply was modified 5 years, 7 months ago by Sushil Adhikari.

[Author]

Posts