Почему мое фоновое изображение не отображается - PullRequest
0 голосов
/ 31 марта 2020

У меня следующий код css, и мне нужно отобразить фоновое изображение для страницы, однако ничего не работает. Я удостоверился, что я правильно обращаюсь к пути, так что это не проблема. Возможно, в моем CSS коде есть изъян? Извините, переполнение стека постоянно говорит, что мой вопрос содержит слишком много кода и меньше деталей, но я уже описал свою проблему. Поэтому я просто набираю текст, чтобы я мог опубликовать вопрос и получить обратную связь.

Мой код следующий:

*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}

body{
font-family: 'Raleway', sans-serif;
}

.background{
background: url("./assets/img/rooms/room3.jpg") no-repeat;
background-size: cover;
height: 100vh;
display: flex;
}

.text, .box{
margin-top: 45vh;
flex: 1;
}

.text{
margin-left: 10%;
font-weight: 300px;
}

.box{
margin-left: 25%;
}

.text h1{
font-size: 70px;
font-weight: 500;
color: purple;
}

.text p{
color: purple;
font-size: 20px;
font-weight: 300;
}

.text p a{
font-weight: 700;
color: orange;
}

.form{
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 250px;
}

input{
margin: 20px 0;
padding: 10px;
border: none;
outline: none;
color: grey;
font-family: 'Raleway', sans-serif;
}

.username, .password{
border-bottom: 1px solid #fff;
}

.button{
border: 1px solid purple;
color: purple;
font-size: 18px;
}

.button:hover{
background: white;
color: #;
}

Пример HTML:

div class="background">
<div class="text">
<h1>Login</h1>
 <p>No Account? <a href="signup.html">Click Here To Sign up</a></p>
        </div>
        <div class="box">
            <form class="form">
                <input type="text" class="username"      placeholder="Username" required>
                <input type="password" class="password" placeholder="Password" required>
                <input type="submit" class="button" value="Login">
            </form>
        </div>
    </div>

1 Ответ

0 голосов
/ 31 марта 2020

вы, вероятно, забыли поставить класс для .background, если это изображение, на которое вы ссылаетесь. Также были некоторые ошибки. попробуйте:

.background{
    background: url("http://www.birds.com/wp-content/uploads/home/bird4.jpg") no-repeat;
    background-size: cover;
    height: 100vh;
    display: flex;
}

и добавьте класс для фона к чему-либо:

<body class="background">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...