Prev Demo
Background-Size: Contain In Responsive Web Design Images
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Demo</title> <meta name="viewport" content="width=device-width" initial-scale="1.0"> </head> <body> <h1>Background image responsive from its original size</h1> <style> p { width: 100%; background-image: url('http://techfunda.com/HTPictures/Generics/5-635942140823078493.jpg'); height:450px; background-size:contain; background-repeat:no-repeat; border:2px solid orange; } </style> <p></p> <div>Start Scaling the window, so that the image starts scaling from its original size.</div> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
