background-size
Edit This Code :
See Result »
<!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: auto; } #example2 { 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: 300px 100px; } </style> </head> <body> <h2>background-size: auto (default):</h2> <div id="example1"> <h2>Hello World</h2> <p>The background image is displayed in its original size.</p> </div> <h2>background-size: 300px 100px:</h2> <div id="example2"> <h2>Hello World</h2> <p>Here, the background image is set to 300px wide and 100px heigh.</p> </div> <p><strong>Note:</strong> The background-size property is not supported in Internet Explorer 8 and earlier versions.</p> </body> </html>
Result :
Newer Post
Older Post
Home