Html фон на страницу

Question

Html фон на страницу

Iif Jf Ученик (29), открыт 3 недели назад

1)как сделать фон на странице при помощи картинки
2)как сделать так чтобы при прокрутке страницы фон оставался зафиксированным

Answer 1

Для установки фона на веб-странице с помощью картинки и фиксации его при прокрутке, можно использовать CSS. Вот как это сделать:

### 1. Установка фонового изображения

Чтобы установить фон с помощью картинки, добавьте следующий код в ваш CSS файл или внутри тега `<style>` в HTML-документе:

```css
body {
background-image: url('path/to/your/image.jpg'); /* Укажите путь к вашей картинке */
background-size: cover; /* Масштабирует изображение так, чтобы оно покрывало весь экран */
background-repeat: no-repeat; /* Запрещает повторение изображения */
background-position: center; /* Центрирует изображение */
}
```

### 2. Фиксация фона при прокрутке

Для того чтобы фон оставался фиксированным при прокрутке страницы, добавьте свойство `background-attachment`:

```css
body {
background-image: url('path/to/your/image.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed; /* Фиксирует фон */
}
```

### Пример HTML-кода

Вот пример полного HTML-кода с применением вышеуказанных стилей:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Фоновое изображение</title>
<style>
body {
background-image: url('path/to/your/image.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
height: 200vh; /* Для демонстрации прокрутки */
}
</style>
</head>
<body>
<h1>Пример фонового изображения</h1>
<p>Прокрутите страницу, чтобы увидеть эффект.</p>
</body>
</html>
```

Не забудьте заменить `'path/to/your/image.jpg'` на фактический путь к вашему изображению. Теперь при прокрутке страницы фон останется зафиксированным!