Background Image Holder
Creating image background is super easy with SpaceMax. You can create background image directly from HTML and you don't need to touch the CSS anymore.
Create Something Awesome with SpaceMax
Markup example:
<div class="position-relative">
<div class="background-holder background--cover">
<img src="img/image-globe.png" alt="globe-image" class="background-image-holder">
</div>
</div>
Additional Class Reference
background--cover- Apply to
background-holderto resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
background--contain- Apply to
background-holderto resize the background image to make sure the image is fully visible
background--auto- Apply to
background-holderto see the image in original size
background--center- Apply to
background-holderto center the image of the container
background--top- Apply to
background-holderto set the image from the top of the element
background--bottom- Apply to
background-holderto set the image from the bottom of the element
background--left- Apply to
background-holderto set the image from the left of the element
background--right- Apply to
background-holderto set the image from the right of the element
background--top-left- Apply to
background-holderto set the image from the top left corner of the element
background--top-right- Apply to
background-holderto set the image from the top right corner of the element
background--bottom-left- Apply to
background-holderto set the image from the left bottom corner of the element
background--bottom-right- Apply to
background-holderto set the image from the right bottom corner of the element
background--repeat- The
background--repeatproperty sets if/how a background image will be repeated