Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <style> #example1 { border: 2px solid black; padding: 25px; background: url("w3css.gif"); background-repeat: repeat; } #example2 { border: 2px solid black; padding: 25px; background: url("w3css.gif"); background-repeat: space; } #example3 { border: 1px solid black; padding: 25px; background: url("w3css.gif"); 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>
