@3nkywh
Posted
@wilbros Hi, Good job!!! Actually can you use two background into you html, although, you must use doubles value in the properties.
html, body {
background-image: url("background.jpg"), url("background.jpg")
background-repeat: no-repeat, no-repeat;
background-position: right 50vw bottom 50vh, left 50vw top 50vh;
background-color: red;
}
Marked as helpful
@wilbros
Posted
@3nkywh thank you. I've discovered something new today with background positioning. In background position property, what does the 50vw and 50vh do? I understand the right, bottom but its the first time I encountered this property.
I initially did exactly what you suggested except for the 50vw/50vh.
background: url(./background_top.svg) no-repeat, url(./background_bottom.svg no-repeat;
background-position: top left, bottom right;
@3nkywh
Posted
@wilbros Basically, it do refer to how much do you want that it be displaced with respect to relative position of background.
background-position: 0 0;
This position the background in left-top edge of container. The same applies if you use a second background.
