| layout | post |
|---|---|
| title | CSS <strong>background</strong> |
| subtitle | How your rectangle is <strong>filled</strong> |
| section | css |
The background of an HTML element is what appears behind the text. Although CSS allows to apply a background on any type of HTML element, it's mostly used on block-level elements.
Backgrounds are only applied on the targeted element. But considering most HTML elements have a transparent background, applying a background on the body will look like it's applied on all elements.
Default value: transparent
Inherited by children elements: no.
As we've already covered the different ways to define a color in CSS, applying a background color is straightforward:
{% highlight css %} body{ background: #f2eee9;} {% endhighlight %}
The whole element will be filled with a plain background color. Bear in mind to always to choose an appropriate text color to keep your content easy to read.
Because plain colors are usually not sufficient, CSS allows to apply images as backgrounds for elements.
Applying a background image only requires to specify its URL:
{% highlight css %} body{ background-image: url(images/diagonal-pattern.png);} {% endhighlight %}
The behavior of the image (how it repeats itself, where it is positioned, how it is sized) is defined by other background properties. The background-image only defines which image to use.
Bear in mind that the HTML element doesn't take into consideration the dimensions of its background image. Even if the image is bigger than the element it's applied to, the element won't resize to fit the image, as the image is purely decorative and is here to support the element.
The HTML <img> element is for images that are part of the content, while CSS background images are purely decorative.
The logo of a company, the thumbnail of a gallery, the picture of a product... These are all considered content and should use the HTML <img> element.
A diagonal pattern, a beautiful landscape, a cart icon... These can be considered as decorative, as they support the content but are not part of it. If they were to disappear, the webpage would still make sense.
As for many dual choices, the frontier between content and styling is blurry. Some visual techniques are easier to achieve with CSS backgrounds. Just ask yourself if the image you're using is essential to the page. If so, use <img> element.
CSS also allows to define color gradients as background images, in 2 different shapes:
linear-gradientfor gradients in a single direction, in a rectangular shaperadial-gradientfor gradients in all directions, in a circular shape
We cover that in a chapter 8.3: CSS gradients. The only thing to know for now is that background gradients are considered as background images:
{% highlight css %} body{ background-image: linear-gradient(white, grey);} {% endhighlight %}
By default, a background image will repeat itself indefinitely. You can specify its original position, by choosing a horizontal x value, and a vertical y one.
For each coordinate, you either use:
- pixel values
px - percentages, relative to the HTML element's dimensions
- keywords like
center,left,bottom...
{% highlight css %} body{ background-position: right bottom;} {% endhighlight %}
You can mix different coordinate units:
{% highlight css %} body{ background-position: center 20px;} {% endhighlight %}
By default, a background image will repeat itself indefinitely. You can choose to make it repeat only horizontally, only vertically, or not at all.
{% highlight css %} body{ background-repeat: repeat-x;} /* Only horizontally / body{ background-repeat: repeat-y;} / Only vertically / body{ background-repeat: no-repeat;} / The background image will only appear once */ {% endhighlight %}