<

Creating Scalable Full-Width Header in CSS3

Posted on
6,618 Points
518 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
1 Comment
LVL 34

Expert Comment

by:Mike Eghtebas
Thank you.
0

Featured Post

Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Via various tools, systems and automated alerts I generate thousands of emails per day. Using a common method to send these emails makes it easier to standardize these messages. One key feature of these email methods is stylized emails. This article…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month