<

Creating Scalable Full-Width Header in CSS3

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

1
1 Comment
LVL 34

Comment

by:Mike Eghtebas
Thank you.
0
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.
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month