• Страница 1 из 1
  • 1
Как сделать картинку фоном сайта на CSS
Kosten
Понедельник, 15 Июня 2020, 21:25 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Вы можете использовать свойство background в css, чтобы установить изображение в качестве фона, а background может установить все свойства фона в одном объявлении.

Можно установить следующие свойства: background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment и background-image.

Значения разделены пробелами в произвольном порядке, где могут быть только некоторые из этих значений, например background: #FF0000 URL (smiley.gif); разрешено.



Код
<html>
<head>
<style type="text/css">
body
{
background: #ff0000 url(img/1.jpg) ;
}
</style>
</head>

<body>
<p>Это какой-то текст.</p>
<p>Это какой-то текст.</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
<p>Это какой-то текст.??</p>
</body>

</html>

Выше, как использовать CSS, чтобы сделать изображение на заднем плане.

Эффект заключается в следующем
Прикрепления: 1075128.jpg (27.4 Kb)
Страна: (RU)
Kosten
Понедельник, 15 Июня 2020, 21:34 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Атрибут background-size определяет размер фонового изображения. До CSS3 размер фонового изображения определялся фактическим размером изображения, но в CSS3 размер фонового изображения можно указать, что позволяет нам повторно использовать фоновое изображение в различных средах.

Укажите размер в пикселях или в процентах. Если размер указан в процентах, размер указывается относительно ширины и высоты родительского элемента.

Пример:

Код
body{
    background:url(images/1.jpg);
    background-size:450px 300px;
    background-repeat: no-repeat;
}


Атрибут background-origin определяет область позиционирования фонового изображения. Фоновое изображение может быть размещено в области содержимого, области заполнения или рамки.

Код
div {
border:1px solid black;
padding: 40px;
background-image:url('images/111.jpg');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
.demo{
    background-origin:border-box;
}
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: