How to Make the Background Align at the Bottom in CSS
A Cascading Style Sheet (CSS) is a written rule that determines how a Web page appears to a Web user. Web designers use CSS rules to design the appearance of the content on their Web pages. One of these rules is known as the background-position property. The background-position property establishes the position of a background image for a Web page element.
Other People Are Reading
Instructions
-
-
1
Create a CSS rule for your Web page element, and attach the background image. For instance, this example would place a .gif file as the background for the body element of your Web page:
body
{
background-image:URL('yourBackgroundImage.gif');
}
-
2
Include the background-position property in the CSS rule for your element. For example, to set a background image to align with the bottom of your website's body element, you should include the background-position property in the body element's rule as seen in this example:
body
{
background-image:URL('yourBackgroundImage.gif');
background-position:center bottom;
}
-
-
3
Select the property value of your choice. When your write your CSS rule, you should assign a value to the background-position property. You may choose to simply use the "bottom" property value. This will have the effect of aligning your background image with the bottom of the element. There are also three directional property values that align the background with the bottom of the element. These are the "left bottom," "right bottom" and "center bottom" property values. In the above example, the "center bottom" property value is used. This will align the image to the center and the bottom of the Web page's body element.
-
4
Apply the property value to the background-position property. Once you decide on the appropriate property value, write this value into the CSS rule according to the above example.
-
5
Apply other property values as necessary. The background-position property will accept other property values, which enable you to style positioning of the background in several different ways, including positioning the background at a set location and repeating the background along a horizontal or a vertical axis. The World Wide Web Consortium has published a set of standards that describes these additional property values.
-
1
Tips & Warnings
The CSS background-position property is supported by all major Internet browsers. You can use the property without fear that it may not be interpreted by users with different Web browsers.
References
- Photo Credit Comstock/Comstock/Getty Images
