Online Html Editor

<!DOCTYPE html> <html> <head> <style> .size-contain { background-image: url('/css/images/pink-flower.jpg'); background-size: contain; /* Render Whole image */ width: 300px; height: 300px; } .size-length { background-image: url('/css/images/pink-flower.jpg'); background-size: 150px; background-repeat: no-repeat; width: 300px; height: 300px; } </style> </head> <body> <h1>CSS background-size property</h1> <h3>background size contain:</h3> <div class="size-contain"></div> <h3>background size length (300px x 300px):</h3> <div class="size-length"></div> </body> </html>