This is the first lesson in our Customize Genesis Like a Pro video tutorial series. In this lesson we look at customizing various Genesis 2 Child Themes using background images and colors. In this class we introduce basic CSS syntax for editing your child theme.
We start off by looking at background images and how they can be used. Then we use a tiling background image to add a custom look to our skin. We take a look at ways to use multiple background images in the same HTML element. Next we look at using fixed background images and overlay that with semi-transparent colors. We also look at using the Genesis body class system to allow us to style various pages differently. We wrap it up by looking at changing background images for various mobile devices.
Understanding Background Images in CSS
- What is a background image?
- background STYLE
- NOT HTML – doesn’t interfere with the flow of html
- it can occupy the same space as other elements
- Stuff is intended to sit on top of it.
- Characteristics of a background image
- It does not take up space
- It automatically starts in the top left corner of the container
- Repeats as necessary to fill the container
- Properties of background images
- URL
- Repeat
- Position
- Attachment
Add a Tiling Background Image to the Body of a Child Theme
- tiles both ways
- tiles horizontally
- Change color
Using Multiple Background Images in the Same HTML Element
- Add Multiples in Same Area Using the Same Selector
- Positioning Doesn’t Always Work to Adjust the Image Location
- Importance of Optimizing Your Images
- Change the Background Color in the Footer Widgets
Using Different Background Images on Different Pages
- Apply Background Image to Home Page Only
- Apply An Image to Every Page
- Order of Adding CSS Rules
- Change the Background Color of the Navigation Menu
- Inheritance and Specificity Example – Applying Colors to Menu Items
Add a Color to the Sidebar with a Tiling Image
- Background Colors in the Sidebar Extend to the End of Content
- How to Make the Background Color Extend to Bottom of the Sidebar
- Determine Width of the Sidebar
- Choose Area to Attach Image
- Add the Image in Custom CSS
- Collapsing Divs and Floats
- Clear the Floating Elements for the Wrapper
- Change Background Color to Match Image
Using a Fixed Background Image in a Child Theme
- Add Background Image in Custom CSS
- Set the Image Background Position
- Set the Image to Fixed in Place
Using Semi Transparent Background Colors Over a Background Image
- Types of Colors
- Hexadecimal and RGB Colors
- Clearing the Float
- Add Padding To Frame Colors
- Add a Semi-Transparent Background Color Using RGBA Value
Adjusting Background Images for Mobile Devices
- Use Media Queries to Specify Different Images
- Media Queries Genesis Uses
- Change the Background Image for Different Devices
