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 |
|---|---|---|
| Corner Ribbon Effect in CSS | 371 | |
| Rounded Corner Effect in CSS | 71 | |
| Introduction to HTML (Part 1) | 115 | |
| Introduction to HTML (Part 2) | 151 |
Originally, this post was published on Monitis Blog, you can check it
here
.
Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
- Web Development
- Web Applications
- HTML
- Magento
- Web Development Software
- Monitis, Networking, *Hosting, *Monitoring tool
Enroll in these four OWASP courses: Avoiding Hacker Tricks, Forgery and Phishing, Proactive Controls, and Threats Fundamentals. Also learn a basic introduction to web design where you can implement these OWASP security measures.
Suggested Courses
Next Video:Introduction to HTML (Part 1)