<

Watch Creating Scalable Full-Width Header in CSS3

Posted on
6,637 Points
537 Views
1 Endorsement
Last Modified:
Published
Experience Level: Beginner
4:45
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.

1
1 Comment
LVL 34

Expert Comment

by:Mike Eghtebas
Thank you.
0

Suggested Videos

Title Views Activity
Embedded Audio in HTML5 183
Embedded Videos in HTML5 84
Using Google Font API in CSS 69
Flexible Layouts 71
Join us in celebrating longtime user Rowby Goren for his great contributions of engaging with other users on site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a H…
reCAPTCHA Version 3 was released in 2018, and it works differently to the "I'm not a robot" checkbox in reCAPTCHA version 2. With v3, there's no robot checkbox, but an annoying badge is displayed in the lower right corner of your entire website. Eve…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month