<

Creating Scalable Full-Page Backgrounds in CSS3

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

Featured Post

CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

Suggested Videos

Title Views Activity
Calling and Texting Links for Mobile Sites in HTML 215
Custom List Bullets in CSS 179
Drop-Cap Effect in CSS 81
Introduction to CSS (Part 1) 80
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month