HTML and CSS Reference
In-Depth Information
The key difference is that the cover image would be cropped in order to fill the element,
while the
contain
value would always show the enire image and leave an empty space.
The background image of the customer view is a sky that can be cropped without worrying
about losing any important informaion. On the other hand, the ingredients' graphics are
important and we don't want any part of it being cropped because of the element resizing.
That's why we used the
contain
value instead of the
cover
value for
background-size
of the butons.
Using border-image to decorate the customer view
We used
border-image
to decorate the customer view. The benefit of
border-image
is that it takes care of resizing. It is a 9-slice scaling in style sheet. This property takes the
image URL and the 9-slice seing as a value. The following igure shows how the corners
keep the dimension and the edges scaled when the DOM element dimension is changed.
There are several repeaing opions available when the edge scales; they are
stretch
,
repeat
, and
round
.
Mozilla Developer Network provides a detailed usage on the
border-image
property:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
However, it is sill diicult to set the slice ofset without any visual feedback. The online tool,
http://border-image.com/
, would help in generaing the code from the image visually.
The following screenshot shows the tool that lets a user drag the offset with both the slider
controls and guidelines loaded on the image. Once the dragging is done, we can copy the CSS
code generated at the botom text area. The border of the code area is exactly the preview
of the code. We encourage you to check out that website and play with the
border-image
property to understand how to use this property beter.