A further look into CSS
CSS styling consists of a set of properties that can be applied to the HTML elements that support them. Today we will take a look at the background properties.
background-color—Applies a background color to the HTML element whose tags it is inside of. This is good way to give color particular parts of the page. If you want the “h1” header to have a blue background and the “h2” to have a green background, you can easily make that happen.
h1
{
background-color: blue;
}
h2
{
background-color: green;
}
As with HTML, colors can also be assigned hex values and RGB values.
The rest of the background properties revolve around background images and their manipulation.
background-image—Used to set an image as a background for that element. The code will look like: background-image:url(‘thepicture.jpg’);
Options: url(), none, inherit
background-attachement—Determines whether the picture is fixed or moves with the scrolling of the webpage.
Options: scroll, fixed, inherit
background-poisition—Used to set the location of the image on the page. Images can be set at general locations as the center of the page or specific X and Y coordinates.
Options: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x% y%, xpos ypos, inherit
background-repeat—Set how the background image will repeat itself or not repeat itself. You can also set images to repeat on only one axis.
Options: repeat, repeat-x, repeat-y, no-repeat, inherit
To save time one can also combine all of the attributes into one CSS tag called “background”. This can be good to save space on coding. To use this abbreviated property, attributes must be used in the order as they are numbered on this page.
i.e. color, image, repeat, attachment, position
h1
{
background:red url(‘image.jpg’) repeat-y center left
}