Try it Editor: Background-size

Edit This Code :

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
    border: 2px solid black;
    padding: 25px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwXjO_E4A3g4FUDRw9pOX6dkacdDd8x3Rxl10ESaudlxUjBu9KKbT8SefaOtmoryqKFe2blwTqfs_QAUVxd53WquMxoXQ18aoIBaEZAqk_Cvzr13WzwyUG6EMb5s9aBk98w8C0bGHbBmeR/s900/BG.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
</head>
<body>

<h2>background-size: cover:</h2>
<div id="example1">
<h2>Hello World</h2>
<p>The background image is resized to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.</p>
</div>

<p><strong>Note:</strong> The background-size property is not supported in Internet Explorer 8 and earlier versions.</p>

</body>
</html>
Result :
Background-size - cover
