How to globally change page background color to background image - Elemental Theme

Using Concrete / Help
1

Running Concrete 5.5.5 with Elemental Theme and Magic Tabs.

How do I globally change my page background color to a background image. The gear -
design - customize theme - page background allows for color change but nothing to browse and select a file.

Thanks in advance,

2

meant version 8.5.5. Thanks.

3

The built in theme customiser supports setting an overall background colour, but not an image. So you will need to get into CSS.

You actually have 2 issues to overcome, the first is as per your question, to set a background image. The second is a consequential issue, some areas of the page will also have backgrounds you will need to remove in order for your image to show through.

The screengrab below shows the CSS selectors my Omni Gallery addon uses to make key areas and borders transparent and partially transparent with a vegas background slider and with a background overlay for other sliders. You wont need the .vegas-content part of the selector, that is specific to my addon.

image
image950×744 101 KB

https://c5magic.co.uk/addons/omni-gallery/vegas-full-page
https://c5magic.co.uk/addons/omni-gallery/background-overlay

You wont need the exact css, but that gives the general idea you can start from.

You also need to set the background image. If it is not going to change, the easiest is again to set the background image of the body or .ccm-page element with a URL in css. You also need to make the image covers the page. You will need something like:

.ccm-page {
background-image: url("/path/to background/image.jpg");
background-size: cover;
}

The easiest built-in way to add this globally is to add it as a <style> tag in the header extra content part of the dashboard.

A better way is to use @mesuva’s styling addon Theme Styling Tool - concrete5.

Or you could use Elemental Cloner to clone elemental to create a new theme and edit your background CSS into that.

If you are going to change the background or are not fluent with CSS, you will find it easier to use an addon that facilitates all this from a dialog. For example, you could add an Onmi Gallery block to the page footer with a single image in a Vegas Background display set for the whole page.

4

Thanks for your reply! really appreciate it. To be more specific, I’m not looking to change ALL backgrounds to background images, just the full page background. Not sure how much that simplifies my post if at all but I though it might be help to further define what I’m trying to do. Thanks for your suggestions and I"ll look into your direction provided. Thanks!