How to Create a Photo Background in CSS
Cascading Style Sheets (CSS) is the code that works with your HyperText Markup Language (HTML) to style your Web pages. This CSS code is comprised of style rules that direct the browser on how to display your content. The CSS code controls many things, such as the font size and page margins. In addition, you have the option to apply a picture to your page so that your background displays this image. You can use your computer's text editor program to create a CSS photo background for your website.
Other People Are Reading
Instructions
-
-
1
Access a free file or image host, such as MediaFire or TinyPic, and follow the onscreen directions for uploading your photo (see Resources). Copy the URL address that displays after you finish the upload process (for example, "http://www.host.com/photo.jpg"). A host enables your image to be seen on a Web page.
-
2
Open your text editor program (Notepad in Windows, in the Accessories folder) and open a new document. Type "body" and enter a set of curly brackets to create the CSS body rule that controls the overall look of the page. For example:
body { }
-
-
3
Enter "background-image:url (' ');" between the body rule brackets like so:
body { background-image:url (' '); }
-
4
Type your image's URL in between the single quotation marks in the parentheses. To illustrate:
body { background-image:url ('http://www.imagehost.com/photo.jpg'); }
-
5
Save your document with the ".css" ending (for example, "background.css"). Place your file on a host (such as in Step 1) and record the URL address.
-
6
Open the Web page in which you want the photo background in your text editor and position your cursor between the "<head></head>" elements at the top. Enter a style sheet link with your CSS document URL after the "href=" entry like the following example:
<link rel="stylesheet" type="text/css" href="http://www.host.com/style.css" />
-
7
Save your work. Your photo now displays as the background on the Web page.
-
1
