Lesson 1 – Customize Child Themes with Background Images & Colors
Facebook
LinkedIn
Google+
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.
- 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
- tiles both ways
- tiles horizontally
- Change color
- 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
- 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
- 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
- Add Background Image in Custom CSS
- Set the Image Background Position
- Set the Image to Fixed in Place
- Types of Colors
- Hexadecimal and RGB Colors
- Clearing the Float
- Add Padding To Frame Colors
- Add a Semi-Transparent Background Color Using RGBA Value
- Use Media Queries to Specify Different Images
- Media Queries Genesis Uses
- Change the Background Image for Different Devices
Save $200 on Membership Now!
Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
Facebook
LinkedIn
Google+