How to Set a Background Image in HTML

Adding a background image to your website or webpage can help "spice" it up a bit. In this brief article, you will be given the basics of how to add your background image to your site. Here you can combine CSS (Cascading Style Sheet) with HTML to get some cool results.^[1] HTML is used to create the structure of a web page, while CSS applies style to the structure -- but without HTML we would have nothing to style.^[2]

Edit Steps

Open your main .css file in your programming editor. The main css file contains a listing of all the CSS classes/ids pertaining to the main content area of the web page in alphabetical order. These classes should not be deviated from. Then IDs are listed after the classes and would also be in alphabetical order.
- Do not assume that this will work: Many sites offer pre-made div overlays and instruct you on how to use your images and such, and where to "paste" their kind of code.
- Understand that the structure, of the website, is defined by CSS classes for HTML elements. These classes also contain the information about the final appearance of the screen view created by the HTML document. Use HTML for content; CSS for Presentation. The viewed document is coded in HTML, and the new structures to be defined are limited to the style defined by CSS classes and IDs. And the final document will be built by applying it to elements for presentation of these classes in the HTML structure.

Make and set the background image as a part of the BODY for any page defined by this .css file. At the very top of your page CSS document (in your open file), you might try adding a code similar to one of the following code examples.
- CAVEAT, exception: Evidently this image could be effectively ignored in the HTML, if the style sheet itself sets the background. Your call could be negated in a seemingly free background by a preset white or tinted background image (a white or tinted tile), set in the style sheet, or the style sheet may have left it unset to allow you to set the background in a manner such as one of the examples.
- BODY { text-align:center; background: url(img/name_of_picture.jpg) center; } /* put comment here in hash star notation */
  - If you have a large image that would cover the whole page, add "no-repeat" in previous example, after "center". Otherwise the background would be filled with many repeated tiles, such as where the image makes a sort of fill-texture.

Realize this may be done in several ways. Here are more examples:^[3]
- BODY { background: url(banner.jpeg) 50% 0% }
- BODY { background-image: url(banner.jpeg); background-position: top center; }
- BODY { background: url(banner.jpeg) top left }
- BODY { background: url(banner.jpeg) 0% 0% }
- P { background: URL(chess.png) gray 50% repeat fixed }

Put in the actual URL and file name in the place indicated, as the address and name of picture.

See it: after you type in one of the above kinds of codes, save your document, and open your website to view the result and check it!

Types of styles:

Learn to use the three types of styles, avoiding the redundant and scattered methods; so centralize the codes:^[4]

Avoid "inline styles" that are written directly in various tags of a document. Inline styles affect only the tags where they are applied, for example:

<a href="" style="text-decoration: none;">

Avoid "embedded styles" that are embedded in the head of each document. Realize embedded styles are redundant. They are written repeated and affect only the tags on that page in which they are embedded, for example:

<style type="text/css">

p { color: #00f; }

</style>

Link to "external styles" that are written in a separate document and linked to various Web page documents, for less coding on individual web pages. External style sheets can affect any document to which they linked in order to apply the styles, for example:

<link rel="stylesheet" type="text/css" href="styles.css" />

Get smaller, faster page downloads as a streamlined benefit of using best practices of CSS that recommend for you to primarily standardize presentation of headlines and text (page banners, columns, fonts, sizes and faces), plus images (sizes, borders, rounded corners, etc.) in external style sheets for presenting the linked Web pages in a website.

Use cascading style sheets to pass inheritance to any page linked to that CSS code sheet (document). You could, of course, have more than one style sheet for different kinds of pages (main, gallery, articles, listings, etc.), but they can be combined if styles and IDs are consistent, limited and called where needed.

Edit Tips

The page style itself may need to be changed to set the background.

Embedding -- in digital technology -- to place (text, images, sound, video or active computer code) in a computer file, HTML document, software program, or electronic device: to embed "images on your Web site;" to embed "software in cars and airplanes for engine operation, monitoring or for navigation, etc.

"Div overlays are becoming the most popular way to spruce up MySpace profiles without much HTML knowledge. Finding a premade div overlay first depends on where you intend to use the code. For instance, a div overlay you usually requires that you first "hide" the code that is customary for that particular webpage display. So, if you are using MySpace, you will need to be sure that your code includes coding applicable to MySpace, likewise for blogs and other profile sites. There are several websites that offer premade div overlay codes and some that will also walk you through the process of creating your own, and more still that give you the simplicity of point and click guidance in creating them yourself. It is not necessary to have an extensive HTML background, but it is important that you at least understand the basics of it as it is used with CSS since CSS (Cascading Style Sheets) are how div overlays are created." ^[5]