Two Column Layout Vertical Menu Tutorial
Add Body and Header Background Images
Section 1 Lesson 8
Two Column Layout Vertical Menu Tutorial
Add Body and Header Background Images
Section 1 Lesson 8
This lesson adds the body background graphic and the page header background graphic.
Step 1: Create folder for the graphic files.
Create the folder assets in the folder where you have the site.css file. The in the assets folder create the graphics folder.
Step 2: Download the page background image.
Download the body_bg_60x58.png file and place into the assets/graphics.
body_bg_60x58.png
The background image is a small graphic swatch that can be repeated horizontally and vertically for a pattern.
Step 3: Download the page heading background image.
Download the header_bg_900x155.jpg file and place into the assets/graphics.
header_bg_900x155.jpg
The background image is a small graphic swatch that can be repeated horizontally and vertically for a pattern.
Step 4: Add background and remove top margin.
Insert lines 3-12 into the site.css file in your practice folder, then save.
This CSS styles the body tag to have repeating background image and remove top margin. When you see a top margin setting the body top margin to 0px may not remove the margin because there are other tags relative to body that have a margin creating the effect the body has a margin or padding at the top. Often this may be observed before you have all the layout complete. Use inspection tool to find the offending tag.
There are no changes in the index.html file from the last lesson.
Completed Step 4
Step 5: Style the aside elements.
Insert lines 35 and 36 in the site.css file in your practice folder, then save.
There are no changes in the index.html file from the last step.
Completed Step 5