<!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> Code <!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; } Code 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 }); // Добавьте дополнительные анимации и функциональность для слайдера Code // 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 }); // Добавьте дополнительные анимации и функциональность для слайдера весь код выше, гифка не выводится в фон, не могу понять почему, кто разбирается подскажите пожалуста ну и сильно не ругайте, я только учусь .
LISIYKOT, попробуй: <style> 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; /* Фоновое изображение не будет прокручиваться со страницей */ } </style>
Попробуй: body { background: url(../files/5b9d37da2e7b32407ec2dfc35e070110.gif) center center/cover no-repeat; background-attachment: fixed; }
Проверь путь локалхоста или сервера во вкладке "Сеть", проверь, правильно ли он прописан. Так же убери кавычки в url() -> background-image: url(../img/bg.jpg);