.hero-image { background-image: url("photographer.jpg"); /* The image used */ background-color: #cccccc; /* Used if the image is unavailable */ height: 500px; /* You must set a specified height */ background-position: center; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: cover; /* Resize the background image to cover the entire container */ } *Always set a *background-color* to be used if the image is *unavailable*. body { background-image: url("img_tree.gif"), url("paper.gif"); background-color: #cccccc; } *By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter