Добавление фонового изображения в CSS Squarespace — это отличный способ добавить немного стиля на ваш сайт. background-image — это свойство CSS, которое позволяет указать изображение для использования в качестве фона элемента. Изображение размещается поверх background-color и, если указано, background-repeat и background-position.
Самый простой способ добавить фоновое изображение — указать URL-адрес изображения, которое вы хотите использовать в качестве значения свойства background-image:
background-image: url(https://example.com/image.jpg);
Вы также можете использовать другие значения для свойства background-image, например, «none» или «inherit».
Если вы хотите добавить фоновое изображение к определенному элементу на вашей странице, вы можете использовать CSS-селектор для этого элемента. Например, если вы хотите добавить фоновое изображение ко всем
тегам на вашей странице, вы можете использовать следующий CSS:
p {
background-image: url(https://example.jpg);
}
Вы также можете добавить фоновое изображение к элементу с помощью атрибута стиля HTML. Атрибут style можно добавить к любому элементу HTML, и он позволяет задать правила CSS в строке. Например, если вы хотите добавить фоновое изображение к элементу
элемента с идентификатором «container», вы можете использовать следующий HTML:
..
Добавление фонового изображения с помощью нескольких изображений
Если вы хотите добавить несколько изображений в качестве фона, вы можете сделать это, разделив значения запятой:
div {
background-image: url(https://example.com/first.jpg), url(https://example.com/second.jpg);
}
Добавление фонового изображения с помощью градиентов
Вы также можете добавить градиенты в качестве фонового изображения с помощью функции linear-gradient():
div {
background-image: linear-gradient(to right, red, orange);
}
Добавление фонового изображения с повторяющимися узорами
Вы можете сделать фоновое изображение повторяющимся, используя ключевое слово repeat:
div {
background-image: url(https://example.com/pattern.png) repeat;
}
Вы также можете управлять тем, как оно повторяется по вертикали, горизонтали или в обоих направлениях, используя ключевые слова repeat-x, repeat-y или repeat соответственно:
div {
background-image: url(https://example.png) repeat; /* повторяется в обоих направлениях */
}
div {
background-image: url(https://example.png) repeat-x; /* повторяется только по горизонтали */
}
div {
background-image: url(https://example.png) repeat-y; /* повторяется только по вертикали */ }
Добавление фонового изображения с контролем размера
Вы можете заметить, что при добавлении большого изображения в качестве фона, оно иногда выглядит размытым или не покрывает весь элемент, как вы хотите — вот здесь и пригодится контроль размера! По умолчанию фоновые изображения будут чередоваться (повторяться), заполняя весь элемент, однако вы можете изменить их отображение, используя ключевые слова contain или cover в сочетании со свойством size::
div { /* содержит все изображение внутри элемента */ background-size: contain; }
div { /* масштабирует изображение так, что оно заполняет весь элемент */ background-size: cover; }