<

[Webinar] Streamline your web hosting managementRegister Today

x

Creating Scalable Full-Page Backgrounds in CSS3

Posted on
6,214 Points
114 Views
1 Endorsement
Last Modified:
Experience Level: Beginner
3:57
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3.

Video Steps

1. Create a new HTML document with an internal stylesheet.

2. In CSS, define the html element to have a background image. Use a high resolution image.

3. In the same background property specify it as no-repeat, centered, and fixed.

4. Define the background-size property (unique to CSS3) as "cover".

5. Redefine the background-size property with prefixes of -webkit-, -moz-, and -o- for browser compatibility.

6. Create a div and name it Content. Set its width as 40%, height as 100%, position to absolute, and left to 25%. Define its background color as white.

7. In the HTML type the tag for the Content div.

1
Comment
0 Comments

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month