Загрузка...

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

Тема в разделе Frontend создана пользователем LISIYKOT 20 июн 2024. (поднята 20 июн 2024) 244 просмотра

Сортировать
  1. LISIYKOT
    LISIYKOT Автор темы 20 июн 2024 0 29 апр 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>
    Код
    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
    
});
    

    
// Добавьте дополнительные анимации и функциональность для слайдера
    весь код выше, гифка не выводится в фон, не могу понять почему, кто разбирается подскажите пожалуста ну и сильно не ругайте, я только учусь .
     
    20 июн 2024
  2. BABLO
    BABLO 20 июн 2024 4764 20 окт 2023
    путь к файлу проверь, он совпадает ?
     
    20 июн 2024
    1. LISIYKOT Автор темы
      BABLO, да путь проверял
      20 июн 2024
    2. BABLO
      LISIYKOT, открой консоль, посмотри, есть ошибки (браузере)
      20 июн 2024 Изменено
    3. Посмотреть следующие комментарии (6)
  3. NoevKovchek
    NoevKovchek 21 июн 2024 0 31 янв 2023
    Попробуй:
    body {
    background: url(../files/5b9d37da2e7b32407ec2dfc35e070110.gif) center center/cover no-repeat;
    background-attachment: fixed;
    }
     
    21 июн 2024
  4. Mamashin
    Mamashin 21 июн 2024 10 21 окт 2019
    Проверь путь локалхоста или сервера во вкладке "Сеть", проверь, правильно ли он прописан.
    Так же убери кавычки в url() -> background-image: url(../img/bg.jpg);
     
    21 июн 2024
Загрузка...
Top