HTML and CSS Reference
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:
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.