Thesis Theme 1x Full Width Page Background Image – Full Width Framework in Design Options

Thesis Theme 1x Full Width Page Background Image – Full Width Framework in Design Options

by Dave Curtis on 11/30/2015

in Working SEO

First and foremost, before you try this you MUST tick off the radio button option for “Full Width Framework” in Thesis’ “Design Options” or this simply won’t work. So rule one.

It doesn’t matter if you’re a newb with Thesis or not, one of the MOST ANNOYING things to date that I’ve found is that EVERY question on the web regarding images on pages (Not site background to the left, bottom and right of the borders of the blog/site) but actual images within the pages – every single answer so far is a non answer. It took me days to figure this out and it was relatively simple, really. If all you want is the code, then copy the code below and paste it into your custom.css file and change the image path to where the image is on your own website.

/* CUSTOM PAGE & POST BACKGROUND IMAGE */
.full_width > .page { background: url(http://allfreebackgrounds.com/backgrounds/backs/brick/20.jpg) 0 0 repeat;
background-attachment; fixed;
}

In that example above the image is on the http://allfreebackgrounds.com website. Go there if you need some good ones.

Here’s how I figured out how to make it work.

In Design Options you can change your page/post content area background color. So I made mine EFEFEF just for the hell of it. Then I downloaded a copy of the theme from my site to my hard drive and did a search for EFEFEF in all file formats and the layout.css file showed up (it’s in the /wp-content/themes/thesis_181/custom/ folder).

I opened it in Notepad++ and did a search for EFEFEF and it brought me to line 285 where the following code was located:

.full_width > .page { background: #EFEFEF; }

I reasoned that if “background” could be a color or an image elsewhere on the site then I could turn it into an image in the layout.css file and that it would work by changing line 185 to:

.full_width > .page { background: url(http://allfreebackgrounds.com/backgrounds/backs/brick/20.jpg) 0 0 repeat;
background-attachment; fixed;
}

Well, it did work, but every time I change anything else, in the Design Options page and saved it, my change was deleted and replaced with the old EFEFEF again. Bummer.

So I think you know where I’m going with this – what about the custom.css file? Could I load that line in there as is, intact, and have it override the default layout.css file?

You bet!

Now I’m thinking that now I can take just about any area of Design Options code and do precisely the same thing to almost any one of them (if not every single one) and have it work. HOWEVER, again, you MUST tick off the radio button option for “Full Width Framework” in Thesis’ “Design Options” or this simply won’t work, and I suspect the case will be the same for any other theme.

Probably without much modification you can make this work on sites that aren’t Thesis 1.x. BTW – I have Thesis 2.x too, but I still prefer working with 1.x.

Glad I could help.

Previous post:

Next post: