#example1 { background: url(mountain.jpg); background-repeat: no-repeat; background-size: auto; } #example2 { background: url(mountain.jpg); background-repeat: no-repeat; background-size: 300px 100px; }
body { background-position: center; background-repeat: no-repeat; background-size: contain; }
<head> <style> #example1{ border: 2px solid black; padding: 100px; background: url(mountain.jpg); background-repeat: no-repeat; background-size: 100% 100%; } </style> </head> <body> <div id="example1"> </div> </body>
/* One way */ background-size: cover; /* Other option */ background-size: contain;
#example1 { background: url(mountain.jpg); background-repeat: no-repeat; background-size: cover; }
.class{ background: url("../images/icons/map.png") no-repeat center center/50px 50px fixed; }
background-size: 100px 50px; /* 100px wide, 50px tall */
background-size: cover;