transparent page to show faint image/watermark

Hi there! You can add an image to the background of your whole site using Sela by adding the following CSS:

body {
	background-image: url("URL-of-image-here");
}

Depending on your image, you may need more code, like to position it or have it repeat. A list of options is explained here: https://www.w3schools.com/css/css_background.asp

To adjust the opacity of the white background, add this CSS:

.site-content {
	background: #fff;
	opacity: .6;
}

(Adjust the .6 to a number between 0 and 1 that works best for you.)

When adding CSS, don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. Once it’s activated, go into Appearance > Edit CSS and paste your CSS in there.

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

Let me know if you have any questions! ??

Is there any way I can make this work with only making the white background transparent and not the content? i.e youtube videos, text, embedded soundcloud player, etc.

Hi @mattjallday,

You can make the background transparent, without it having any effect on the actual text, using the following custom CSS:

.site-content {
    background: transparent;
}

As a heads up: It’s against the forum guidelines to post questions to other people’s threads. If you have further questions then please start another thread and I can help further from there.