Exported from Notepad++

<!DOCTYPE html> <html> <head> <style> #s1 { border: 2px solid black; padding: 50px; background: url(yog.jpg); background-repeat: no-repeat; background-size: auto; } #s2 { border: 2px solid black; padding: 50px; background: url(yog.jpg); background-repeat: no-repeat; background-size: 300px 100px; } #s3 { border: 2px solid black; padding: 50px; background: url(yog.jpg); background-repeat: no-repeat; background-size: cover; } #s4 { border: 2px solid black; padding: 50px; background: url(yog.jpg); background-repeat: no-repeat; background-size: contain; } </style> </head> <body> <h2>background-size:used to specify the size of the background image how it re sized or scaled within its containing element. </h2> <div id="s1"><p> auto (default):</p></div> <div id="s2"><p>set iamge to : 150px 50px:</p></div> <div id="s3"><p>cover : Resize the background image to cover the entire container,cut and resize it</p></div> <div id="s4"><p>contain : Resize the background image to make sure the image is fully visible </p></div> </body> </html>