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 |
|---|---|---|
| Calling and Texting Links for Mobile Sites in HTML | 218 | |
| Embedded Audio in HTML5 | 184 | |
| Embedded Flash in HTML5 | 102 | |
| Embedded Videos in HTML5 | 84 |
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it
here
.
In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Suggested Courses
Next Video:Lists and Links