(How to add a) Background Image ?

Hi @progresstination!

You could add a new cover block and move the entire site inside that cover block. You will want to set the image to “repeat background” and possibly remove the color overaly. Here’s what it would look like:

You will likely want to give the elements in your site (header, content) a background color to make it readable.

Please let me know if that helps!

• This reply was modified 1 year, 12 months ago by Alvaro Gómez.

Hello, Thank you!
Very nice of you to have answered!
Yes, I see how that would work, but I am definitely searching for a more centralized option/solution, as I do not want to change several templates to begin with and then again, when I want to change the picture. Counting the numbers of people who answered here, I guess this really is no option in tt-t at this point.

I will try something like this in my child themes style.css:

body {
background-image: url(“gradient_bg.png”);
background-repeat: repeat-x;
}

If it works, I’ll repost it here.

Yep, that simple:
(by default it repeats the picture on x and on y, so exactly what I was looking for)

Simply add:

body {
background-image: url(“imageurl/picture.jpg”);
}

in your css style sheet.

Thank you @progresstination for the css fix!

@mrfoxtalbot I followed a tutorial that suggested doing just as you said for a background pattern – nest everything inside a cover block and add the repeat background image to it.

The problem is now I’ve got a white margin (or padding) at the top and bottom of the site on every page.

The tutorial suggests a css fix for it. If I was going to add css for it, I’d probably just add the background-image code instead, as suggested above.

But is there a way to remove that margin for the whole site from inside the theme editor instead? Something we’re missing?

Thank you!

Hi @theakl

is there a way to remove that margin for the whole site from inside the theme editor instead? Something we’re missing?

Some of the style variations include a margin body padding that cannot be removed via the Site Editor or via Global Styles. This is a known limitation in the way style variations have been added, you will need to use CSS to remove it.

Since @progresstination ‘s initial question is solved now, I am marking this as solved. If you need further support with this, please open a separate thread.