<

Watch Creating Scalable Full-Page Backgrounds in CSS3

Posted on
6,243 Points
143 Views
1 Endorsement
Last Modified:
Published
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
0 Comments

Suggested Videos

Title Views Activity
Using Google Font API in CSS 69
Introduction to CSS (Part 1) 80
Introduction to CSS (Part 2) 114
Introduction to jQuery (Part 1) 819
Join us in celebrating longtime user Rowby Goren for his great contributions of engaging with other users on site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a H…
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