If you want to apply an image, you can use the background-image property.
body {
background-image: url("paper.gif");
background-color: #ded6c6;
}The url() takes a string which specifies where the file is located in relation to the CSS document. If it is within a style tag of the document, then it is based upon the location of the web document.
Notice how we use a color property to go along with the image? That color would be an overwhelming color from the image, and is designed to be a stand-in, in case the image takes a while to load or is missing and unable to be loaded.
While not required, the background color should always be set as a precaution.
There are also other background related properties which can be applied to an element. Most of these will be used to control the displaying of a background image.
background-attachment: This property is designed to determine if the image will move as you scroll through the page. Scroll is the default value, and fixed is also commonly used, but it can also have a value of local and initial.
background-position: This property defines the starting position of the image. By default, it starts in the top left corner. You specify two values, horizontal and then vertical. You can also specify values as either a px amount or percentage.
background-repeat: By default a background image will repeat if the element is larger than the image. This can be useful if you have a repeating pattern, but may not be desirable for other designs. In which case you set it to no-repeat.
An example of where I used a background-repeat for my purpose, was in a series of buttons which I wanted to provide a background design to. It was a simple pattern, so I repeated it along the x-axis (horizontally) and was able to use a much smaller image to save space.
background-size: is used to specify how big the image will be in relation to the item. By default the size is auto, which is the actual size of the image. If the image is too big for the container, it will not show the images outside of the containing element. If it is smaller than the containing element, then it will repeat based upon the value of the background-repeat property.
However, you can resize the image within reason, and based upon some constraints. The cover value allows an image to fill the containing element, even if the image has to be stretched. So normally, you will have a slightly larger image. The contain value will resize the image so the whole image is displayed. This can be a problem if the element is not the same, or similar, proportions to the image. You can also set the size to a pixel or percentage value pair.
The sizing values are often similar, so you might need to experiment with different values based upon your image, target devices, etc.
Background Gradients
If you want more than a simple color or an image, you might apply a gradient with one of the gradient values that can be applied to a background such as: linear-gradient(<color 1>, <color 2>), radial-gradient(<color 1>, <color 2>), or conical-gradient(<color 1>, <color 2>).
With each of the gradients, you have to provide at least two colors, although more might be applicable.
.button {
background-color: #cc0;
background-image: linear-gradient(red, yellow);
}
The Background Shortcut
As with several CSS rules, you can set multiple properties values at one time if you use the right property. There is a background property that will allow you to combine numerous background related properties into a single line. These include:
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- Background-attachment
body {
background: #7f7 url("img_tree.gif") no-repeat fixed center;
}Using the Background
Backgrounds can be tricky, and one solution is to often layer them to allow you to create what you need. For example, a background image should be “simple” meaning without too many patterns which can make the text which should be overlaid over it hard to read.
However, a nice photo which varies in colors, and patterns might be needed to help set the mood of a page or site. So a solution would be to put the image on the page, and then a white, or semi-transparent white background on the main tag which can allow the text to be read easier.
That begs the question, can you apply a transparency to a background, and the answer in short is yes. You can both use images which have a transparency, or you can apply the transparency to a color.To apply transparency to a color, you simply add a fourth value to the RGB values. Technically this is an opacity, so the higher the value, the more you see the color. That means you might see something like.
#aaa which gives you a medium grey color, and is equivalent to #aaaaaa. However, if you put #aaa3 (#aaaaaa33) which is nearly transparent, but gives a slight ghost effect, or #aaaa which is just over 50% opaque, all the way up to #aaaf, which would be completely opaque and thus the opacity level wouldn’t be needed.
Background Images was originally found on Access 2 Learn
