Background Vs. Background-Color
Developers can dictate the presentation properties of Web page elements by using a combination of HTML Web programming language and Cascading Style Sheet declarations. CSS declarations can enforce various styling properties for element backgrounds. Background color is only one of the possible style options for HTML elements, others include background images, as well as rules for repeating and positioning these.
Other People Are Reading
-
HTML Elements
-
CSS code can identify and dictate background style for any element or group of elements in a page. Developers sometimes structure the HTML elements in a page using attributes so that CSS code can identify particular items for styling. For example, the following element includes an ID attribute:
<div id="header">The Site Header</div>A single ID attribute value should only appear once within a Web page. This is because the ID attribute identifies elements uniquely. To create a group of elements to apply the same style properties to, HTML can include a class attribute as follows:
<div class="central">A Central Element</div>This page may include the same class attribute value for multiple elements, including elements of different types.
CSS Identifiers
-
The CSS code for a Web page can identify HTML elements by type, as follows:
div {
/* CSS properties */
}Alternatively, CSS code can identify elements with a particular ID attribute, as follows:
#header {
/* CSS properties */
}To identify elements with a particular class attribute, CSS can use the following code:
.central {
/* CSS properties */
}This identifies elements of any type with the class attribute, but to identify elements of a particular type with the attribute, CSS can use the following syntax:
div.central {
/* CSS properties */
}All of these structures can include styling for element backgrounds.
-
Background Color
-
CSS declarations can specify the background color for HTML elements using CSS color values, which can appear as hexadecimal values, standard color names recognized by browsers, RGB (Red, Green, Blue) colors or HSL (Hue, Saturation, Lightness) values. The following sample CSS code demonstrates setting element background color using a hexadecimal value:
background-color: #FF0000;This specifies that that entire area behind the element should be a bright red color. The following CSS excerpts demonstrate using the other value types to determine various background colors:
background-color: black;
background-color: rgb(0,255,0);
background-color: hsl(180,80%,55%);Background colors in CSS can apply to any HTML elements, or to an entire page.
Background Properties
-
CSS provides various additional properties for element backgrounds in HTML. Many Web pages include background images using CSS. With CSS, developers can specify the URL for the browser to locate a background image, as well as specifying whether it should repeat, where it should be positioned and whether or not it should scroll along with the rest of the page. Each of these properties has its own declaration in CSS, but by using the background property, developers can include any or all of them in a single line, along with the background color. The following sample code demonstrates the technique:
background: #333333 url('backpic.jpg') no-repeat left top;
-
References
Resources
- Photo Credit Hemera Technologies/Photos.com/Getty Images
