The next thing we’re going to do in this lesson on Customizing Thesis 2 with Background Images, Colors and Gradients is to add a fixed a background image in a child theme.
Load the Image in Skin Editor
This is one of those cases where we will switch skins again. Manage Skins and we’ll come back to the Classic Responsive and refresh our page. I’m going to my Custom CSS from my prior session. So there we go, we’re there now. I’m going to fixed background image in here and we’re going to start off by going to the Skin Editor and loading that image. This is the big one I believe, so add that image.
Add Code to Custom CSS
This is a picture that I took a couple of days ago here on a beautiful early morning hike. We’ll take a copy of that and again, we’re going to put that in the body. Say body, background-image url, place that semi colon and then the position. Actually, we’re going to leave the position alone for just a moment and in fact, we’re going to leave it like that for the moment. Let’s save our Custom CSS, refresh this and obviously it repeats itself, right? But you can see the image back there.
Review Image Position on the Site
Let’s change the size of the browser window and you can see that the image stays in the same place in the left hand corner while the web page moves and adjusts. So the position of the web page is always changing relative to the image and that’s actually not the desired result.
Change Position to Centered, Fixed
The actual desired result is to keep the image centered so we are going to say, background-position and again it’s horizontal center. Then we’ll say top semicolon and then we’re going to say background-repeat, no-repeat semicolon.
We’re going to use the background attachment property and we’re going to use the fixed property of background attachment. What that will do is rather than the image scrolling up and down, that image is going to stay fixed in the browser window and the content is going to scroll past it.
Review the New Position
Let’s save that, come back over here and reload it. Now when we scroll the image stays in its place and as we change our browser window size, the image stays centered in the browser window. So you see less and less of the sides as the browser window gets smaller but what it shows to the browser is the same every time.
So that’s the background attachment property and another way in which we use the position property. These big full background images are all the rage these days just like what we have on Laura’s site. They’re just very popular right now and this is how you would do that.
Obviously you can’t read the text so we’re going to fix that by adding a color to the page and then we’re going to learn how to make that color semi-transparent.