In this session, a member wants to know how she can have a fixed background image with a transparent page in Thesis. We show how to do this by customizing the body and background area using our BYOB Thesis Full Width Background Options plugin and then making the content area background and #content_area.page transparent. We also use custom CSS code to prevent the background image from showing through.
You asked a really interesting question which I interpreted to be essentially, how do you do something like this?
Yes, that’s correct.
Okay and so why don’t you tell me what it is about this that you want to accomplish?
I’d like the static background and have the post page which is currently named homepage on my site scrolling. But I like the boxes and the transparency to see the images behind.
Okay and do you have one great big image like this that you’re going to put back there or are you using a tiled image or how are you accomplishing the image?
I put an image. I’ve uploaded an image today. I haven’t been able to make it static and I haven’t been able to make it transparent to go through.
And you can do either of those things, right? Do you have a URL?
Yes, I do. It’s aysenkara.com.
And is it kara.com?
And you have one big image that you want to fill this entire space already?
Behind that page, there is actually an image but you can’t see it at the moment.
And I can’t see it because it’s been covered up or I can’t see it because…
It’s covered up with the page because it’s not transparent. It can’t be seen.
Okay so I’m going to open that background image in a new tab. So there’s our background image and now what I want to do is just save that. Let’s see, I guess I need a different browser for that. Okay save image as, okay akbackground.jpg. I’m going to still save it on my desktop. Okay, now I’m going to go to an entirely different site, sbywh13. This is where we’re going to play with it. Colors aren’t going to match, right? I mean, it’s not going to…
Yes, that’s fine.
It’s not going to look good with this but it doesn’t really matter, I don’t think that much here.
No, it doesn’t matter.
So then we’re going to go to the dashboard and down to the Full Width Backgrounds plugin and right now, I’m just customizing the header and footer. But what I’m going to do now is customize the body and the content area so I’m customizing everything here. And for the body background color, we’re going to pick that lavender. Let’s see, so that is this color there. Okay, there’s our lavender. And the background image, I’m going to upload to my media library. Actually you know, what I’m really going to do is I’m just going to use your copy of it. I’m going to do it that way. I’m just going to paste that there. I’m not going to repeat it. It’s going to be a no repeat. It’s going to be top center and I’m going to hit save. And right now, you won’t be able to see it.
So if we come over and take a look at… if we go to visit site, it’s still not there. You can’t see. It actually is there but you can’t see it because it’s covered up by everything else.
Okay so what you have to do next is… we want it to be covered up by the header and the footer. We just don’t want it to be covered up by the content area. So what we do is in the content area, we come over to background color and image and we make the content area background transparent. And we also make content area .page transparent. We make both of those transparent. Now you’re going to see the background image, the body background image through there. Okay, there’s your body background image.
Which was the last transparency you made?
It is the content area and content area .page.
Here’s what happens if we don’t do content area .page. The page element of content area stays white.
I see, yes.
So there’s the page area… page element of the content area and actually, you know what? I don’t think I realize… although this should be… continue to be pink across here… right now, content…
Because the image isn’t wide enough?
No, let me just look again here for a second. Background color although that should be transparent and if we make that transparent, is it all going to go… is that going to be right? Actually, what’s happening is there’s an issue here with my body background color. My body background color is not kicking in here. So what I’m going to do is just copy it and go over to Thesis Design Options and I’m going to make that the background color of the body here. Site background color is going to be that purple. You can ignore the page background color because we’re changing it anyway.
Okay so now, all the background should be that purple color and then you’ve got your image sitting on top of it. Now the difference here is, of course, you don’t want the image to scroll through this, right?
Okay and so now is a point in which we need to use custom CSS because right now, my plugin doesn’t let you set this background image so that it doesn’t scroll. Right now, the plugin doesn’t have that option. I’m going to add that option but I haven’t added it yet. So right now, what you have to do then is use custom CSS to make that work. And if we come over here to Edit CSS and if inside of… well, I’m not using my custom CSS file on this so I’m just going to add it down here to the bottom. Isn’t that interesting? Okay so we come down here and say .custom… actually, what we’re really going to say is body .custom and that’s giving us the… where the background image is. This is the background image that’s attached to body. So then…
Will this go on every page?
This is on every page.
Do you not want it on every page?
Well, it won’t show on every page but that’s fine.
Okay. So on body .custom then we’re going to say… actually, the next thing we need to do is say background anchor, I believe. Let’s go to W3 Schools for a second and go to CSS and then backgrounds and then background attachment. That’s what it is. It’s background attachment and I think the answer is fixed. Background attachment… yeah. I believe background attachment fixed is the right syntax for that. So come back over here to our thing and say background attachment fixed.
Now as you scroll through here, the image stays where it is. Okay?
Now, the other thing you wanted to do though is of course, you don’t want to have read the text over the image, right?
What we need to do here is change the way this homepage works. So I’m going to save this little bit of information here right now so I can come back and get it later because we’re going to lose it here in a second. Are you familiar with what I’m doing here? I just used Web Developer.
Web Developer is one of the tools that I use for essentially, prototyping, right? You’re testing your code before you actually make it real.
Okay, no I’m not familiar with it.
Well, see Web Developer shows you your CSS files and lets you edit them but you’re not really editing them. You’re only editing them for this browser window. So if I refresh this, that edit goes away.