Custom background images – override customizer?

Hi Alistair, could you give me a few more specifics about what you’re trying to do?

When you say “one section of the site” do you mean a particular page or category, for example?

You can target the background of specific pages, posts, categories, tags, etc. with CSS. I can help you with the code, but I’ll need to know more about what your goal is.

If you have a link to the site in progress, all the better. Thanks!

Hi Kathryn,

Yes I mean particular pages.

So – the site has this background image: https://silviamercuriali.com/site/

But I might want this page to have a different one: https://silviamercuriali.com/site/projects/autoteatro/etiquette/

Now you’ve mentioned CSS I can guess how it might be done – something like:

.page-id-2 {
background-image: url(images/blahblah.jpg);
background-repeat: repeat;
}

Would that be it?

Yep, you’re close. Try something like this:

body.page-id-2 {
	background-color: #xxxxxx;
	background-image: url("https://full/path/to/your/image.png");
	background-repeat: repeat;
}

I tested that here and it works. Let me know how it goes.

Just a heads-up: don’t edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

Thanks Kathryn. It worked for me, though I needed to put an !important on to get it to work:

background-image: url("https://full/path/to/your/image.png") !important;

Cool, glad you got it working.

though I needed to put an !important on to get it to work:

That’s because you didn’t add the CSS in one of the ways I recommended above – child theme or CSS plugin – it looks like you edited your style.css file directly. Please keep in mind that the next time you update the theme, all your CSS changes will be overwritten. It’s good practice not to edit your theme files directly, as I mentioned above. ??