Как отобразить фоновое изображение в моем HTML / css? - PullRequest
Новая
       9

Как отобразить фоновое изображение в моем HTML / css?

0 голосов
/ 19 февраля 2020

Я видел еще одну топику c о своей проблеме, но она не решает ее, я пытаюсь добавить фоновое изображение для своего портфолио, но оно не работает. Я не понимаю почему, у вас есть идея?

мой код:

html: 

 <div class="main">
    <div class="navbar container-fluid d-flex justify-content-center"> 
        <i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i> 
        <i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i>
        <i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i>
    </div>
</div>

css:

.main{
background-image: url(../img/dev-dots.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;


}

.navbar{
    height: 10vh;
    background-color: purple;
    position: fixed;
}

PS: Извините за мой английский sh, это не мой родной язык.

Ответы [ 5 ]

0 голосов
/ 19 февраля 2020 
.main {
  background-image: url(../img/dev-dots.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 200px;
  height: 100px;
}
0 голосов
/ 19 февраля 2020

вы предоставляете неверный путь. попробуйте это 

<!DOCTYPE HTML>
<html>
<head>
<style>

.main{
background-image: url(http://www.cagbd.org/assets/upload/logo/1124d2b92e3b8f44b1c8f21cfebc6dae.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}

.navbar{
    height: 10vh;
}
</style>
</head>
<body>
    
 <div class="main">
    <div class="navbar container-fluid d-flex justify-content-center"> 
        <i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i> 
        <i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i>
        <i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i>
    </div>
</div>



</body>
</html>
0 голосов
/ 19 февраля 2020

Ваш элемент div с классом 'main' не имеет высоты. Фоновое изображение не будет отображаться из-за этого.

Вы можете сделать один из следующих вариантов:

Задать фиксированную высоту (не рекомендуется) 

.main {
  height: 100px
}

Добавить блок элементы для вашей панели навигации, так что main автоматически получает ее высоту 

 .navbar {
display: block
}

Не используйте фиксированную позицию и в этом случае.

И последнее, но не менее важное: потеряйте цвет фона панели навигации, это будет лежит поверх фонового изображения main.

Надеюсь, это поможет!

0 голосов
/ 19 февраля 2020 

.main{
background-image: url('https://cdn.pixabay.com/photo/2020/02/14/04/20/old-city-4847469_960_720.jpg');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;


}

.navbar{
    height: 20vh;
     background-color: rgba(0,0,0,0.5);
    position: relative;
    width: 100%; 
    z-index: 999;
    color: #fff;
    padding: 20px;
}
<div class="main">
    <div class="navbar container-fluid d-flex justify-content-center"> 
        <i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i> 
        <i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i>
        <i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i>
    </div>
</div>
0 голосов
/ 19 февраля 2020 

.main{
  background-image: url('http://scontent-vie1-1.xx.fbcdn.net/v/t1.0-0/p640x640/86969955_2219297081712551_4370094468804640768_o.jpg?_nc_cat=108&_nc_ohc=RXVSJ86AsuoAX_l1w_j&_nc_ht=scontent-vie1-1.xx&_nc_tp=6&oh=f79e4654f5cee0a184fa73d9faa0af49&oe=5EFBD055');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 200px;


}

.navbar{
    height: 10vh;
    background-color: purple;
    position: fixed;
    width: 100%;
    padding: 20px;
}
 <div class="main">
    <div class="navbar container-fluid d-flex justify-content-center"> 
        <i class="fab fa-react fa-3x firstIcon mr-4"> <span class="txtIcon"> Project</span></i> 
        <i class="fas fa-check-square fa-3x mx-4"> <span class="txtIcon2"> Skills</span></i>
        <i class="fas fa-id-card fa-3x ml-4"> <span class="txtIcon3"> Contact</span></i>
    </div>
</div>

Это то, что вы ищете? Атрибут fixed не позволяет контейнеру расширяться, поэтому фон для отображения отсутствует.

...