About our Customize Genesis Like a Pro Course
Good morning everybody and welcome to this special seminar on Customizing Genesis Child Themes Using Backgrounds, Background Colors and Gradients. This is actually the first lesson in what will be probably a fairly lengthy series that is entitled Customize Genesis Like a Pro.
In this series we will be focusing on how to use Custom CSS and Custom PHP to customize the appearance and functionality of Genesis Child Themes so that they will do what you want them to do and they’ll look the way you want them to look.
Lesson 1, Customizing Genesis Child Themes Using Backgrounds, Background Colors and Gradients
Today we are going to be looking at background images, background colors and gradients but before we dive right into that material I need to present some material from a seminar I recently taught, an Introduction to Customizing HTML and CSS for Genesis. If you haven’t watched that seminar, I strongly recommend that you do so. You can select this link for the Introduction to HTML and CSS and watch that first.
The BYOB Genesis Child Theme Editor Plugin
However, we are going to begin by installing a plugin and it’s one that I created for the Genesis theme. You can find it here on my menu in Member Benefits under Plugins for the Genesis Theme. I have this plugin down here at the bottom called the BYOB Genesis Child Theme Editor Plugin.
This plugin can do quite a few things but we’re only going to be looking at its CSS coding ability here. This is only available to members of my website and you can install it on your site by right clicking on this and choosing download. I’m going to install it on these two sites that we’re going to be working on today.
We’re working on the Executive Pro Child Theme and we’ll be also we working on the Eleven40 Pro Child Theme. We’ll come on over to the Executive Pro and install that plugin. Come over to Plugins and Add New and upload. What you’re going to do is go to the place where you just downloaded it. Downloads and that is right here, byob-genesis-child-theme-editor.
For a full introduction to the BYOB Genesis Child Theme Editor Plugin’s functionality, you can watch the videos on the download page to see how to use it.
Once we’ve installed it and activated it, it adds this little menu here. If you’ve already installed one of my plugins then you already have this menu item and if you haven’t then you’re going to see this for the first time. All of my plugins will load under this menu item and the Child Theme Editor is this one right here and this is where we’ll end up writing our CSS for this.
What Are Background Images (CSS Images)?
But before we do that, I want to talk briefly about what background images are. What may not be obvious to you is that the stripe effect that’s being created here with the white and the black and the white and the dark grey, this is a background image that’s about 20 pixels wide and it is repeated all the way across the length of the site.
You can see here what it looks like in Photoshop. This is it a little bit of white and then black and then white and then that dark grey. This is the image that’s being used as the background image across here and it’s being repeating. So regardless of how big the browser window is, this image is going to extend all the way across but because it’s only 20 pixels wide, it’s quite small in size.
They Style but don’t Take Up Space
Now, that is a style right? This background image doesn’t actually take up any space, it’s not an HTML image, it is a background style and not being an HTML image, it doesn’t interfere with the flow of the HTML.
HTML Images Take Up Physical Space
So this image on my website, the gal with the Build Your Own Business Website and that kind of thing, this is an actual HTML image. This has a very specific dimension, it has a height and a width and it’s sitting inside of a container. It sits over the top of this repeating background image so my header logo, that part of the site is an actual HTML image and does take up space.
It occupies its space alone whereas the background image that’s behind it can be in a space with other elements and in fact, is designed to be in a space with other elements and allowing other elements to overlay on top of them.
Background Image vs HTML Image Examples
Another example is this Laura Crisci site that we’re working on in the WooCommerce class. This is actually a Thesis skin but the background image itself works in exactly the same way, that is we have this one big fixed background image and then there is a background image here for the menu. There is another background image for the background of the actual page, this board, and then we have some other background images for the semi-transparent white color that sits on top of that.
Note that this background image is in the body and everything else sits on top of it whereas a traditional image doesn’t do that. For example, let’s come over to our store and look at a traditional image like this image right here, this product image. It is in the space all by itself sitting on top of other things whereas this background image for the board that is essentially the page background that’s scrolling up and down here, this is in a space that contains all of this stuff.
You can have other elements covering a standard HTML element but you have to do that with CSS positioning. However, background images are intended to have other things covering them. They’re intended to have other things overlaid on top.
So what they are doing essentially is styling the background of a container that contains other things whereas the standard HTML image is something that is contained. It’s not styling a container, it’s actually an HTML element that is taking up space and is sitting on top of whatever background style there may be.
Characteristics of a Background Image
So that leads me to summarize the characteristics of a background image. Background images do not take up space, if you stick a background image style in some place, it’s not going to push anything around. It’s not going to push something down below it, it doesn’t occupy any space.
Position and Repeating
It automatically starts at the top left hand corner. This background image actually doesn’t because we’ve told it to start in the top middle but by definition, they automatically start in the top left hand corner. And they automatically repeat until they’ve filled up the space that they’re containing.
For example this white background image here, the semi transparent white, it is repeating itself across and down and all the way to the point at which its container ends. So it doesn’t extend to be on the boundaries of its container and it automatically is repeating itself to fill that container.
This board background which is also repeating background image we’ve told to expand vertically to fill its container but not repeating itself horizontally so it’s only repeating vertically but not horizontally. Then this background image with Laura in the background, that background does not repeat itself, it’s staying in a fixed position.
So these are the general characteristics of a background image.
- It’s a style for a container
- It automatically repeats itself to fill that container
- It automatically starts in the top left hand corner of that container unless you tell it otherwise
Properties of Background Images
Which then brings us to the properties of background images and I’d like to direct you to w3schools which is a resource that I use all the time. It’s a free resource.
w3schools.com – a Great Resource
Anytime I want to check my own syntax or refresh my memory, I’m always using w3schools. W3schools has this section on Learn CSS, click on Learn CSS and come over to CSS Backgrounds. Well, the background that we’re talking about in particular now is not background color but background image.
The properties of a background image are first, its URL that is its location. If you can’t find the image, it doesn’t have anything to display so the first property of a background image is its actual location.
Repetition – X & Y
The second one is its repetition, does it repeat or not? If it repeats, does it repeat in the X-direction or in the Y direction? Something repeats in the X-direction that means it repeats horizontally. If something repeats in the Y direction that means it repeats vertically and if something just repeats which is its default condition it means it repeats in both directions.
So this white background color here is an example of a background image that is repeating in both directions. This board is an example of an image that is repeating in the Y-direction only and this header image here is an example of an image that is repeating in the X-direction only so it’s repeating horizontally.
The next characteristic is the background position. Background position is essentially its starting position. So the question is, on what part of the image does the background start? We’ll look at a variety of ways in which to use background position.
By default it’s at 00 which means it starts in the top left corner but it could also start at the top center or it can start at the center center or can start at the bottom center or can start at the bottom right. It can start wherever you want it to start but you specify the background position based on where you want the image to begin displaying.
The next thing is background attachment and you can see two examples of background attachment on this page. The first example of background attachment is background fixed. Now background fixed means that the image just stays right where it is and so you can see Laura just stays here looking at her store. But the default is scroll and this background image for the menu is scrolling up and so is the background image for the page. So you can have background attachment fix or background attachment scroll.
We’re going to be looking at examples of both of these as we go into the specific examples in the presentation. Those are the properties of the background images.