<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Creating Scalable Full-Width Header in CSS3

Posted on
6,560 Points
460 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

Learn Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

Join & Write a Comment

Suggested Videos

Title Views Activity
Calling and Texting Links for Mobile Sites in HTML 182
Introduction to CSS (Part 1) 78
Lists and Links 102
Flexible Layouts 69
This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month