background-repeat: repeat (default)
Edit This Code :
See Result »
<!DOCTYPE html> <html> <head> <style> #example1 { border: 2px solid black; padding: 25px; background: url("http://www.dwfaisalabad.com/wp-content/uploads/2017/11/wordpress49-180x180.png"); background-repeat: repeat; } #example2 { border: 2px solid black; padding: 25px; background: url("http://www.dwfaisalabad.com/wp-content/uploads/2017/11/wordpress49-180x180.png"); background-repeat: space; } #example3 { border: 1px solid black; padding: 25px; background: url("http://www.dwfaisalabad.com/wp-content/uploads/2017/11/wordpress49-180x180.png"); background-repeat: round; } </style> </head> <body> <h2>background-repeat: repeat (default)</h2> <p>Here, the background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default:</p> <div id="example1"> <h3>Hello World!</h3> </div> <h2>background-repeat: space</h2> <p>Here, the background-image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images.</p> <div id="example2"> <h3>Hello World!</h3> </div> <h2>background-repeat: round</h2> <p>Here, the background-image is repeated and squished or stretched, to fill the space (no gaps):</p> <div id="example3"> <h3>Hello World!</h3> </div> </body> </html>
Result :
Newer Post
Older Post
Home