<

Creating Scalable Full-Page Backgrounds in CSS3

Posted on
6,244 Points
144 Views
1 Endorsement
Last Modified:
Published
Experience Level: Beginner
3:56
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
0 Comments
Find out what you should include to make the best professional email signature for your organization.
In this post, I'll use examples to illustrate how the "If" function operates.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month