Почему не отображается гифка в фоне сайта?

LISIYKOT · 20 июн 2024

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Отдых в Приморском крае</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<header id="header">

</header>

<main>
<section id="welcome">

</section>

<section id="info">

</section>

<section id="contact">

</section>
</main>

<footer id="footer">

</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="scripts.js"></script>

</body>
</html>

Код
<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Отдых в Приморском крае</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>



<header id="header">

  

</header>



<main>

  <section id="welcome">

    

  </section>

 

  <section id="info">

    

  </section>

 

  <section id="contact">

    

  </section>

</main>



<footer id="footer">

  

</footer>



<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

<script src="scripts.js"></script>



</body>

</html>
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-image: url('/files/5b9d37da2e7b32407ec2dfc35e070110.gif'); /* Добавлено изображение фона */
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed; /* Фоновое изображение не будет прокручиваться со страницей */
}

header, footer {
background-color: #4693f8;
color: white;
text-align: center;
padding: 10px;
}
section {
padding: 20px;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

Код
body, html {

    margin: 0;

    padding: 0;

    font-family: Arial, sans-serif;

    background-image: url('/files/5b9d37da2e7b32407ec2dfc35e070110.gif'); /* Добавлено изображение фона */

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed; /* Фоновое изображение не будет прокручиваться со страницей */

  }

 

  header, footer {

    background-color: #4693f8;

    color: white;

    text-align: center;

    padding: 10px;

  }

  section {

    padding: 20px;

  }

  button {

    background-color: #4CAF50;

    color: white;

    padding: 14px 20px;

    border: none;

    cursor: pointer;

    transition: background-color 0.3s;

  }

  button:hover {

    background-color: #45a049;

  }

  .tooltip {

    position: relative;

    display: inline-block;

  }

  .tooltip .tooltiptext {

    visibility: hidden;

    width: 120px;

    background-color: black;

    color: #fff;

    text-align: center;

    border-radius: 6px;

    padding: 5px 0;

    position: absolute;

    z-index: 1;

    bottom: 125%;

    left: 50%;

    margin-left: -60px;

    opacity: 0;

    transition: opacity 0.3s;

  }

  .tooltip:hover .tooltiptext {

    visibility: visible;

    opacity: 1;

  }
// GSAP ScrollTrigger анимация
gsap.registerPlugin(ScrollTrigger);

gsap.to("#welcome", {
scrollTrigger: {
trigger: "#welcome",
start: "top center",
end: "bottom center",
toggleActions: "play none none reverse",
},
backgroundColor: "#ffebcd",
duration: 1
});

// Добавьте дополнительные анимации и функциональность для слайдера

Код
// GSAP ScrollTrigger анимация

gsap.registerPlugin(ScrollTrigger);



gsap.to("#welcome", {

  scrollTrigger: {

    trigger: "#welcome",

    start: "top center",

    end: "bottom center",

    toggleActions: "play none none reverse",

  },

  backgroundColor: "#ffebcd",

  duration: 1

});



// Добавьте дополнительные анимации и функциональность для слайдера
весь код выше, гифка не выводится в фон, не могу понять почему, кто разбирается подскажите пожалуста ну и сильно не ругайте, я только учусь .

BABLO · 20 июн 2024

путь к файлу проверь, он совпадает ?

NoevKovchek · 21 июн 2024

Попробуй:
body {
background: url(../files/5b9d37da2e7b32407ec2dfc35e070110.gif) center center/cover no-repeat;
background-attachment: fixed;
}

Mamashin · 21 июн 2024

Проверь путь локалхоста или сервера во вкладке "Сеть", проверь, правильно ли он прописан.
Так же убери кавычки в url() -> background-image: url(../img/bg.jpg);

Сделаю сайт бесплатно за отзыв

[FREE LAND 0/3] САЙТЫ|ВЕРСТКА|БЭКЕНД и многое другое

Оцените Telegram Mini App

Bio сайт

Проблема с клавиатурой IOS в telegram web app.

Персональная карточка Terminal

404 Okak

Фронтенд-разработка сайтов: HTML, CSS и JavaScript

Personal Card

Бесплатный ленд за отзыв

БЕСПЛАТНО создам ЛИЧНО ВАМ сайт за отзыв в тгк

Быстрые и современные веб-сервисы

Кряк DevExpress

Как удалить водяной знак lovable с сгенерированного сайта?

Выживание - Telegram Mini app

БЕСПЛАТНО сверстаю сайт, лендинг, страницу, визитку, под ****** и т.д.

Как прописать анимацию кнопок в QT DESIGNER? CSS

Анонимный чат Telegram Mini-app

Куда в фигме пропал css export?

Что не так в данном SVG файле? почему форум не принимает его?

{FREE} BackEnd/FrontEnd регчек/парс/запросы это я могу

Всем привет оцените первый сайт

Кто поможет сделать такой же блок html, css, js

Курс верстки|БЕСПЛАТНО|+в коммы

Typerscript Discord Plugin AutoMute [Vencord]

Как пользоватся VS CODE для написания кода?

FLS GULP 3.0 Документация

Разработка приложения для отслеживания финансовой статистики

Нужно воспроизвести код java

Чем сейчас занимаются java-программисты?

Почему не отображается гифка в фоне сайта?