<

Creating Scalable Full-Width Header in CSS3

Posted on
6,541 Points
441 Views
1 Endorsement
Last Modified:
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
Comment
1 Comment
 
LVL 34

Expert Comment

by:Mike Eghtebas
Thank you.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Join & Write a Comment

Suggested Videos

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month