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.
Search WWH ::

Custom Search