aristosarseno
@aristosarseno
studying html css.

Почему не работает background-image?

До этого все работало, но после выгрузки на хостинг перестало.

<!DOCTYPE html>
<html>
    <head>
        <title>Дзеранов Артур 211-351</title>
        <meta charset="UTF-8">

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap" rel="stylesheet">
        
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header> 
            <div class="AllHederMenu">
                <div class="logo">
                    <h1>Streetwear Day </h1>
                </div>
                <div class="TopMenu">
                    <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Categories</a></li>
                        <li><a href="Support.html">Support</a></li>
                        <li><a href="home.html">home</a></li>
                        <li><a href="SiginIn.html" class="Sigin">Sigin In</a></li>
                    </ul>
                </div>
            </div>
        </header>
        <main>
            <div class="Main-window"><!--Главное окно в котором вся инфа(начало)-->
                <div class="Window-light"><!--Прямоугольное Окно внутри(начало)-->
                    <p>
                        
                    </p>
                </div><!--Прямоугольное Окно внутри(конец)-->         
                    <div class="window-big"><!--Прямоугольное большое Окно внутри(начало)-->
                    <p>
                        
                    </p>
                </div><!--Прямоугольное большое Окно внутри(конец)-->
            </div><!--Главное окно в котором вся инфа(конец)-->
        </main>
    </body>
</html>


*{
    margin: 0px;
    padding: 0px;
}
header{
    display: flex;
    justify-content: center;
}
body{
    font-family: 'Chakra Petch', sans-serif;
    background-color: black;
    color: white;
    font-family: 'Chakra Petch', sans-serif;
    background-image: url(images/backgroundIMG.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}



.logo, .TopMenu{
    display:inline-block;
    font-size: 20px;
    color: white;
    vertical-align: middle;
    margin-right: 25px;
    font-family: 'Chakra Petch', sans-serif;
}

.TopMenu li{ 
    display: inline-block;
    vertical-align: middle;
    margin-right: 25px;

}

.TopMenu a{
    font-family: 'Chakra Petch', sans-serif;
    font-size: 20px;
    color: white;
    vertical-align: middle;
    text-decoration: none;
    
}

.TopMenu a:hover{
    color: rgb(49, 194, 16);
    
}

.logo h1{
    font-family: 'Chakra Petch', sans-serif;
    font-size: 30px;
    vertical-align: middle;
    color:white;
}

.Sigin{
   text-align: right;
}
li:hover{
    opacity: .80;
    font-weight: bold;
    transform: scale(1.1);
}



.Main-window{
    margin: 50px auto;
    background: black;
    height: 800px;
    width: 900px;
    padding: 20px;
    box-shadow: 2px 2px 15px rgb(49, 194, 16);
    border-radius: 20px;
    color: white;
    background-image: url(images/backgroundIMG.png);
    
}

.Window-light{
    margin: 0px;
    background: black;
    height: 400px;
    width: 200px;
    padding: 20px;
    box-shadow: 2px 2px 15px rgb(49, 194, 16);
    border-radius: 20px;
    color: rgb(49, 194, 16);
}

.window-big{
    margin: 30px 30px 10px 0px;
    background: black;
    height: 290px;
    width: 850px;
    padding: 20px;
    box-shadow: 2px 2px 15px rgb(49, 194, 16);
    border-radius: 20px;
    color: rgb(49, 194, 16);
}


button{
    cursor: pointer;
    padding: 10px 30px;
    height: 50px;
    color:white;
    background-color: rgb(49, 194, 16);
    border: none;
    box-shadow: 2px 2px 15px rgb(49, 194, 16);
    border-radius: 20px;
}
button:hover{
    opacity: .80;
    font-weight: bold;
    transform: scale(1.1);
}
  • Вопрос задан
  • 120 просмотров
Решения вопроса 1
nazares
@nazares
Software Engineer
работает, проверяй пути к изображениям, смотри ошибки в консоли
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы