<

Go Premium for a chance to win a PS4. Enter to Win

x

Creating Scalable Full-Width Header in CSS3

Posted on
6,494 Points
394 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Join & Write a Comment

Suggested Videos

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remaiā€¦

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month