Расположение фона с помощью свойства background-position.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Positioning backgrounds</title> <style> body { font: 14px courier; background: #fff; color: #000; margin: 0; padding: 10px; } p { background: #ccc url("https://foxyforex.ru/wp-content/uploads/2023/09/bg.gif") no-repeat; height: 200px; text-align: center; margin: 20px; } code { background: white; padding: 0 15px 2px; } #p0 { background: none; height: auto; } #p1 { background-position: center; } #p2 { background-position: right; } #p3 { background-position: bottom left; } #p4 { background-position: 20px; } #p5 { background-position: 50%; } #p6 { background-position: 75% 25px; } #p7 { background-position: top 99px right 9px; } #borderCollie { background: none; } #borderCollie a { display: block; height: 200px; background: #ccc url("https://foxyforex.ru/wp-content/uploads/2023/09/bg.gif") center no-repeat; transition: background-position .5s; text-indent: -999em; } #borderCollie a:hover { background-position: 50% 10px; } </style> </head> <body> <p id="p0">В дополнение к <code>background-repeat: no-repeat</code>…</p> <p id="p1"><code>background-position: center;</code></p> <p id="p2"><code>background-position: right;</code></p> <p id="p3"><code>background-position: bottom left;</code></p> <p id="p4"><code>background-position: 20px;</code></p> <p id="p5"><code>background-position: 50%;</code></p> <p id="p6"><code>background-position: 75% 25px;</code></p> <p id="p7"><code>background-position: top 99px right 9px;</code></p> </body> </html>
Страницы в тему:
- Фоновые изображения
- Повторяющиеся фоновые изображения
- Фоновые изображения (Продвинутый урок CSS)