0
Answered

How to change the site-wide repeating template background image.

admin 2 weeks ago updated 2 weeks ago 2

I have been working on my site and my admin team and I are unable to figure out a way to change the repeating background tile that transverses the entire site.  We are using LINX as the primary but we would like to use our own tile as we dislike the gray color and would like a more parchment type color. 


I was able to find this image in the CSS for the site but I am not very familiar with CSS and don't know how to replace that particular image.  

.background-primary,
.site-content {
        background: url("images/shadow.png") center 68px no-repeat,
        url("images/concrete_seamless.png") repeat;
}

Is there an easier way to change this or can you provide instructions on a CSS method?

Thanks in advance.

Answer

Answer
Answered

Hello-

Thank you for the excellent question. You're right that the Linx Theme uses a hard-coded background pattern and I'm sorry that's giving you so much trouble.

Checking out your website, it looks like you may have already worked this out with the following code:

.page-template-page_home .entry-content, .post-title-hidden .site-content, .mce-content-body {
    background: url(images/shadow.png) center 0 no-repeat, url(images/tea-parchment-background.jpg) repeat;
}

I recommend that you place this code into your Customize -> Advanced -> Custom JS & CSS menu, rather than directly into the theme code, but your solution looks like it's working.

Please write back if you need any additional help!

GOOD, I'M SATISFIED

Quicker response time than I would typically expect.  Thanks so much for the help!

Satisfaction mark by admin 2 weeks ago

Thanks so much Jesse.

We tried adding it through the path that you suggested but for some reason we were not able to get the images to appear.  I got in touch with my IT & Hosting team member and he was able to add the image to the database directly so that we could modify the path you mentioned.

Thanks so much for getting back to me.  I sincerely appreciate the response and the help.

Answer
Answered

Hello-

Thank you for the excellent question. You're right that the Linx Theme uses a hard-coded background pattern and I'm sorry that's giving you so much trouble.

Checking out your website, it looks like you may have already worked this out with the following code:

.page-template-page_home .entry-content, .post-title-hidden .site-content, .mce-content-body {
    background: url(images/shadow.png) center 0 no-repeat, url(images/tea-parchment-background.jpg) repeat;
}

I recommend that you place this code into your Customize -> Advanced -> Custom JS & CSS menu, rather than directly into the theme code, but your solution looks like it's working.

Please write back if you need any additional help!