Try it Editor: Background-size: contain, cover

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), url(http://www.dwfaisalabad.com/wp-content/uploads/2017/11/wordpress49-180x180.png);
    background-repeat: no-repeat;
    background-size: contain, cover;
}
</style>
</head>
<body>

<h2>background-size: contain, cover:</h2>
<div id="example1">
<h2>Hello World</h2>
<p>Here we have two background images. We specify the size of the first background image with "contain", and the second background-image with "cover".</p>
</div>

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

</body>
</html>
Result :