<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Creating Scalable Full-Page Backgrounds in CSS3

Posted on
6,230 Points
130 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

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Join & Write a Comment

Suggested Videos

Title Views Activity
Corner Ribbon Effect in CSS 284
Custom List Bullets in CSS 125
Introduction to jQuery (Part 2) 893
Lists and Links 102
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month