Загрузка...

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

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

Сортировать
  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 4649 20 окт 2023
    путь к файлу проверь, он совпадает ?
     
    20 июн 2024
    1. BABLO
      LISIYKOT,

      ошибки следующие:

      1. Неправильный путь к файлу
      2. Файл отсутствует
      3. Ошибки в имени файла или пути
      4. Проблемы с правами доступа
      5. Относительные и абсолютные пути
      6. [b][/b]Проблемы с сервером[/B]
      20 июн 2024
    2. LISIYKOT Автор темы
      BABLO, смотрел, не помогает
      20 июн 2024
    3. mortenforever
      LISIYKOT, попробуй путь указать ./files/5b9d37da2e7b32407ec2dfc35e070110.gif
      21 июн 2024
  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