Most containers in HTML are transparent by default. You can use a color and an image as a background. Images come with a number of additional settings.
You can apply a color to a container’s background with the
<div style="background-color: #FF4949;"> What a background! </div>
As mentioned in the Colors article, there’s a variety of ways to define colors in CSS:
background-color: tomato; /* named value */ background-color: #FF4949; /* hex value */ background-color: rgba(255, 73, 73, 1); /* rgba value */ background-color: hsla(0, 100%, 50%, 0.3); /* hsla value */ background-color: transparent; /* no background */
You can fill the background of a container with an image using the
background-image property and a URL of an image:
<div style="height: 400px; background-image: url('http://website.com/picture.jpg');"> </div>
height property sets the vertical size of the container. This property is explored in more detail in the next section of the course.
When an image is used for background it is rendered at its full size from the top left corner of a container. If the image doesn’t fit the container, it is cropped:
<div style="height: 200px; background-image: url('http://website.com/picture.jpg');"> </div>
If the background image is smaller than its container, it is repeated:
You can control the position, the size and the behavior of a background image with a set of additional properties, some of which are explored below.
You can specify the vertical and the horizontal alignment of a background image with the
<div style="background-image: url('http://website.com/picture.jpg'); background-position: bottom center;"> </div> <div style="background-image: url('http://website.com/picture.jpg'); background-position: top left;"> </div>
- Vertical alignment keywords are:
- Horizontal alignment keywords are:
You can also define whether you want the background image to be repeated when it’s smaller than the container using
<div style="background-image: url('http://website.com/picture.jpg'); background-repeat: no-repeat; background-color: #ddd;"> </div>
The available values are:
repeatrepeats a background image both vertically and horizontally. This value is useful for filling a container’s background with a pattern. It’s the default value.
repeat-xrepeats an image horizontally.
repeat-yrepeats an image vertically.
no-repeatprevents a background image from being repeated.
As you can see in the example above, if the background image is smaller than the container, the background color becomes visible. You will also be able to see the color through the background images with transparency.
You can specify the size of a background image with the
<div style="background-image: url('http://website.com/picture.jpg'); background-size: 200px;"> Hello </div>
This is particularly useful when you export images for high-resolution displays in @2x or @3x, and you need to set their original dimensions to use as a background. If you are reading this article on a Retina display or a similar one, you should notice how sharp the image below is compared to the images in the previous examples:
There's also a special value,
cover, that scales an image to fill the container completely without cropping too much area of the image:
This value, when combined with
background-position, provides you with freedom to align background without having to worry whether the image fits into a container, or whether it’s being cropped too much:
Create a small photo gallery using the
- Fork your result of the task in the Colors article. You can also fork the prototype from the article.
- Add background images to all of the three containers. Here are the URLs of the images used in the prototype above:
https://images.unsplash.com/photo-1529114901968-3b83794634b7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=60 https://images.unsplash.com/photo-1542772512-2484fbd3ea9b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60 https://images.unsplash.com/photo-1538103600552-1bca79408b2c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60
- Apply the
background-size: coverto all containers for a better fit.
The images in this prototype are found on Unsplash. This is a great source of free high-quality photographs, that comes with a nice feature that gives you extra control. When you right-click on a photo on Unsplash, and select Copy Image Address, the URL of this type is copied:
Notice that the URL ends with
w=, which stands for width, and
q=, which stands for quality. You can change the values that follow these letters to request a different size of an image (in pixels) and a different quality (from 0 to 100). For example, here’s a URL that requests the version of an image that is 1280 pixels wide and is of maximum quality: