HTML Code for Placing a Background Image in a Fixed Center
- An HTML document may have a background image for the whole page as well as for specific elements on the page, such as a table. CSS styles can format these background images in various ways. Styles describe effects and attributes such as the name of the source file for the image, the frequency by which the image is repeated on the page and the position of the image on the document.
- To set the position and alignment of a background image, you will need to use several CSS background properties, each of which controls a specific attribute. You must use the element that the image is used for as the selector in the style sheet. For example, if the background you want to align is the main background image, use "body" as the selector, as it corresponds to the <body> tag in HTML.
The structure is the same as all CSS syntax:
selector {property:value;}
where "selector" is the HTML element, "property" is the attribute or effect and "value" is the information for that attribute. - Each CSS background property has its own specific function. The background-image property is used to call up the specific picture file. The background-repeat property determines how many times it is repeated on the page. To decide whether the image "floats" over the page or "sticks" to it as the user scrolls the page, use background-attachment. To set the alignment of the image, use the background-position property. Note that background-position can be marked up in text format such as "center," "left top," etc.; as percentage; as units; or as "inherit"--meaning it will use the same position as another HTML element that contains it. To set an image in the center of a page, you can use "center center," "center" or "50% 50%."
- A background image is formatted with CSS styles that are embedded between the <head> tags in an HTML document. If marked up in an external style sheet, remove code that has the arrows.
In this example, the background image is placed at the center of the page. It is set to "no repeat" so the image appears only once, not tiled like a pattern. The background is "fixed"--if you move up or down or side to side on the page, it will stay in the same place on your screen, as if floating. For example, if there is text on the page, the text will move but the background will not. If you want the image to move with the rest of the page instead, enter "scroll" in place of "fixed" for background-attachment.
<head><style type="text/css">
body
{
background-image:URL('company.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style></head>
Positioning
Syntax
Properties
Examples
Source...