HTML and CSS Reference
In-Depth Information
7. We then add the sushi graphics to the sushi classes:
.sushi {
width: 100%;
min-height: 100px;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.sushiSalmonRoe {
background-image: url(../images/sushiSalmonRoe.png);
}
.sushiSalmon {
background-image: url(../images/sushiSalmon.png);
}
.sushiEgg {
background-image: url(../images/sushiEgg.png);
}
.sushiOctopus {
background-image: url(../images/sushiOctopus.png);
}
Objective complete - mini debriefing
We have decorated our game's layout with graphics. Let's take a look at the CSS properies
we used in this task.
Background-size - cover and contain
The
background-size
property specifies the size of the background image. We can use
numeric values or the
cover
and
contain
keywords.
We used
background-size: cover
for the customer view, but we used
background-
size: contain
for the butons. The cover will scale the background image and ill the
DOM element with the image. When the aspect raio is not the same between the element
and the image, the image is scaled and cropped. In contrast, the
contain
value scales the
image to it inside the element. When the aspect raio is not the same, there would be an
empty space on the side.
