Hi Guys :)
I have read the Support Forum extensively on this issue, but unfortunately the private mixed in with public responses is making it difficult to figure out just the right fix for my needs and if I should go the CSS, or plugin route.
In short I would like to get some texture into the mix on my site and thought adding a textured background would be a good way to accomplish this so I am wondering:
The best way to go about having a custom image background on the home page only.
Or
The best way to have custom backgrounds on each page separately, but I am NOT using a boxed layout.
This is just a project to help me hone my mad now WP skills, so no rush…..
Hi Specialk2e2
Thanks for reaching out.
The core WordPress Background feature is only available when using the Boxed layout. The plugin we’ve mentioned in other posts ties into this core feature. In Boxed mode the background is as you would expect it to be, on the outside of the content container.
In Full Width mode the background field is located at Customize > Theme Design > Page. The background image covers the entire area between the header and footer. This makes it, on the whole, un-suitable for background images. Because Full Width doesn’t use the core WordPress background feature, there are no plugins that can provide a page by page change.
It’s possible to set each page’s background image in Full Width mode using CSS, but it’s laborious. We can show the gist of how that works if you’re interested.
For your home page it would look as follows:
/* Home */ .home #main { background: url('http://urlgoeshere.com'); }Manually setting the background image for other pages requires you to inspect the page source, locate the body tag near the top of the page, locate the unique body class for the page and prefix the #main rule as I did above.
Thank you Andrew :)
So, the Home page worked out perfectly….I just stuck an image in there to see what would happen.
For successive pages, as an example using the About page – would it look like this:
/* About */
.page page-id-12 #main {
background: url('http://urlgoeshere.com');
}
Almost :)
/* About */ .page-id-12 #main { background: url('http://urlgoeshere.com'); }Well then, I am a lot further along than I was a month ago :) I will consider that a success!
And thank you! Hands down the kindest, most comprehensive and prompt customer service experience I have EVER had. With your added snippets and custom CSS solutions, I can't imagine why anyone would need any other theme for most applications.
Last week I received a curt, rude and uninformative response from a new plug-in developer – great plug-in but I uninstalled because I knew I would eventually have to pay them to get the functionality I want. Good code and a great attitude wins the race every time :)
Awesome :) Really glad to hear that got you going. Thanks for your support, it’s most appreciated.
For more on Custom CSS in general, see our guide: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
For a Custom CSS with the help of a Visual Editor, see our new plugin:
Page: SiteOrigin CSS Editor
Let us know if anything else comes up.
All the best :)