<

Creating Scalable Full-Page Backgrounds in CSS3

Posted on
6,243 Points
143 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

Suggested Videos

Title Views Activity
Corner Ribbon Effect in CSS 359
Custom List Bullets in CSS 220
Rounded Corner Effect in CSS 71
Lists and Links 106
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article covers 3 key tips for entering the IT field and resources to leverage in order to pursue the path you wish to run towards. These tips apply to those especially without a background in IT at any age. On your mark, get set....go!

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month