Wordpress & Background Images

[Tad Bittoomuch]

Hi everyone,

 

Is there a way (in Wordpress 5.3.2) to add a background image to a site that doesn't obscure the content?  Kind of like this ↓

 

Left is what I currently have, right is what I want.

 

In the WP admin panel, I have tried Appearance → Background → Choose Image but that puts the content in front of the entire image and I don't want that.

I also don't want to edit the image to include a blank section in the middle for content, as I want to have the site be usable on multiple screen sizes without looking amateur.

 

The image I have in mind will be able to seamlessly tessellate, and because I'm building a shop for a friend, it needs to work regardless of how long the page is/scroll with the content.

I tried googling something along the lines of 'wordpress image sidebar' but that returns results where images are in the sidebar widget, and I also don't want that.

 

If anyone has any experience with Wordpress and wouldn't mind sharing some expertise, that'd be really, really appreciated

 

Alternatively if there's a plugin that can do this, brilliant - I'll give it a look.

 

Thanks

[RageTester]

Make side banners, like advertisements do most of the time...Use a small picture that repeats, limit the size by % of total screen width...

I am more used to html editors, most basic way is table with columns

[Tad Bittoomuch]

13 minutes ago, RageTester said:

Make side banners, like advertisements do most of the time...Use a larger picture, but limit the size by % of total screen...

I just tried that, except the images aren't continuous - unless I'm doing something wrong.

What I really need is a way to add a background image, but leave the middle a solid colour so the content is readable but also scales to the screen size.

[Tad Bittoomuch]

I ended up doing this with a bit of additional CSS. The theme (Storefront) isn't customisable enough to do this natively.

 

The background image is added:

.site-content {
	background-image: url("I don't know, some image or something.tiff");
	background-size: cover;
}

 

EDIT: If you want the image to tile itself vertically, change the value of background-size to '100% auto' and add 'background-repeat: repeat-y;' to the next line.

.site-content {
	background-image: url("I don't know, some image or something.tiff");
	background-size: 100% auto;
	background-repeat: repeat-y;
}

 

Add a solid colour background behind page content as well as remove some utterly senseless, fundamentally flawed padding:

#content > div {
	background-color: #c4c4c4;
	padding-top: 2em;
}

 

And finally, remove some more inane padding on the elements that shouldn't have been in the theme in the first place:

.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header {
  margin-bottom: 0;
  }

 

Honestly, if I wasn't making the website for somebody else, I wouldn't be using WordPress... It's so aggravating to have to peel back these layers of thoughtless design.