Мне нужно сделать сайт для проекта. Как сделать движущийся gif как полноэкранный фон? Here это то, что я сделал до сих пор (в качестве примера)HTML-код для проекта
HTML
<head>
<title>OFFICIAL SQUIDDINC</title>
<div class="gif-container"></div>
<head>
<html>
CSS
html, body {
height: 100%;
margin: 0;
}
.gif-container {
background: url("image.gif") center;
background-size: cover;
height: 100%;
}
Там есть несколько вещей, которые ушли неладно в этом фрагменте.
Для HTML;
Вам не хватает открытия <html> тег. Хотя это может быть просто плохая копия для вопроса.
Ваше <title> - это единственное, что находится в теге <head>.
Остальная часть вашего html должна быть инкапсулирована в тег <body>.
<html>
<head>
<title>OFFICIAL SQUIDDINC</title>
<head>
<body>
<div class="gif-container"></div>
</body>
</html>
Для CSS;
Вам не нужно устанавливать высоту для html, body, однако вам необходимо установить ее для контейнера gif. Я пошел вперед и использовал единицы vh and vw. Это средняя высота видового экрана и ширина окна просмотра, соответственно. Указав 100 для каждого, это будет точно соответствовать высоте и ширине окна просмотра браузера (экрана).
html, body {
margin: 0;
padding: 0;
}
.gif-container {
background: url("image.gif") no-repeat 0 0;
background-size: cover;
height: 100vh;
width: 100vw;
}
DEMO;
Используйте функцию «фрагмента кода» для переполнения стека вместо ссылки на внешний фрагмент кода. – niyasc
Пожалуйста, напишите, что вы пробовали до сих пор. Ваш вопрос, как написано, вряд ли получит ответ здесь иначе. – Asaph
Посмотрите, можете ли вы jsfiddle или codepen поделиться своим делом –
@SachielParadzik Используйте ссылку «edit» под своим вопросом для ее обновления. – ajp15243