PuzzleWeb
.ru
Learn HTML
Learn CSS
CSS tutorial
>
CSS background
> Background image without repeat
Background image without repeat
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page title</title> <style> body { background-image: url('flower.png'); background-repeat: no-repeat; padding-left: 150px; /*Indent from the left edge equal to the width of the image*/ } </style> </head> <body> <h1>Decorate the page with a background image!</h1> <p>When adding an image to the background of an element, the text can hit on it, which can spoil the impression of the page. To prevent this from happening, an indent from the left edge, equal to the width of the image, was added for all elements.</p> </body> </html>
Result:
Edit the code listed above and click the "GO" button to view the result.