4:44
In this tutorial viewers will learn how add a scalable full-width header using CSS3.
Video Steps
1. Create a new HTML document with an internal stylesheet. Set a tiled background.
2. Create a new div and name it Header. Position it with position:absolute at the top left of the page.
3. Define its height as 500px and width as 100%.
4. Define its background image using the background: property. Use a high resolution image. Before closing the background property, specify the image as no-repeat and centered.
5. Define the background-size property as cover.
6. For browser compatibility, copy the background-size property with prefixes of -webkit-, -moz-, and -o-.
7. Add an optional border and box-shadow for effect.
8. In the HTML, type the tag for the Header div.
Suggested Videos
| Title | Views | Activity |
|---|---|---|
| Box Shadow Effect in CSS | 151 | |
| Embedded Audio in HTML5 | 184 | |
| Introduction to CSS (Part 1) | 80 | |
| Lists and Links | 106 |
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Suggested Courses
Next Video:Flexible Layouts