Блог

Главная - Вопросы по программированию - Проблема с добавлением фонового изображения в несколько div

Проблема с добавлением фонового изображения в несколько div

#html #css

#HTML #css

Вопрос:

Привет, ребята, я пытаюсь создать небольшой веб-сайт для школьного проекта, и я столкнулся с проблемой с фоном в нескольких div, поэтому вот мой HTML ` 

         <div class="bloc-1-text">
            <h3>
                
            </h3>
        <p>
            
        </p>
        <div class="bloc-1-img"></div>
    </div>

    </div>
</div>`

И вот мой CSS

 > .promesses{
    font-family: 'Dosis', sans-serif;
    font-weight: 500;
}

.bloc-1{
    border: 1px solid black;
    width: 100%;
    height: 400px;
}

.bloc-1 .bloc-1-img{
    float: left;
    width: 50%;
    height: 100%
    background-image: url(image1.jpg);
    position: relative;
}
.bloc-1-text{
    float: right;
    width: 50%;
    height: 100%;
    background: #dbdbdb;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
.bloc-1-text h3{
    text-align: center;
}

Это не весь код, а только тот код, в котором возникает проблема. Если вам нужно что-то указать, просто скажите мне. Я добавлю его здесь

Хорошо, со вчерашнего дня я пытался немного продвинуться вперед. Вот код: HTML

 `<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta charset="utf-8">
    <title>Parti Nationaliste Québécois</title>
    <link rel="stylesheet" type="text/css" href="css/promesse.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="shortcut icon" type="image/x-icon" href="img/Logo.png">
</head>
<body>
    <header>
        <a href="Index.html" class="logo"> <img src="img/Logo.jpg"></a>
        <div class="menu-toggle"></div>
        <nav>
            <ul>
                <li><a href="Index.html">Accueil</a></li>
                <li><a href="#" class="active">Intention</a></li>
                <li><a href="#">Chefs</a></li>
                <li><a href="Histoire.html">Histoire</a></li>
                <li><a href="https://www.paypal.me/Mathislaliberte">Don</a></li>
            </ul>
        </nav>
        <div class="clearfix"></div>
    </header>
    <script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        $('.menu-toggle').click(function(){
          $('.menu-toggle').toggleClass('active')
            $('nav').toggleClass('active')
        })
    });
  </script>
    <div class="promesses">
        <div class="bloc-1">
            
            <div class="bloc-1-text">
                <h3>
                    Emploi Assuré
                </h3>
            <p>
                Nous avons pour toi un emploi assuré. Que ce soit dans l'armée ou dans une de nos grandes entreprises dans chacunes de nos région, tu n'auras pas de quoi te plaindre que le plaisir

            </p>
            <div class="bloc-1-img"></div>
        </div>

        </div>
    </div>
`

И вот мой CSS
@import url(‘https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800amp; дисплей=подкачка’);

 .promesses{
    font-family: 'Dosis', sans-serif;
    font-weight: 500;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.bloc-1{
    border: 1px solid black;
    width: 100%;
    height: 400px;

}

.bloc-1-img{
    width: 50%;
    height: 100vh;
    background-image: url("img/image1.jpg");
}
.bloc-1-text{
    float: right;
    width: 50%;
    height: 100%;
    background: #dbdbdb;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
.bloc-1-text h3{
    text-align: center;
}

Ответ №1:

удалите блок-1, который находится рядом с блоком-1-img

и установите для bloc-1-text значение 100vh, а не 100%

я проверил на своем компьютере, и это сработало

Ответ

Ответ №2:

 .bloc-1 .bloc-1-img{
    float: left;
    width: 50%;
    height: 100%;<<<<<<<----
    background-image: url("image1.jpg");
    position: relative;
}

потеряно «;»

Селектор CSS https://www.w3schools.com/cssref/css_selectors.asp

Комментарии:

1. Итак, я добавил немного;, ничего не изменилось. По-прежнему ничего на стороне изображения

2. вы должны добавить объяснение вашего примера

3. Проверьте, где находится эта фотография на вашем компьютере.

4. Итак, мое изображение находится в том же файле, что и мой html-файл, никакие другие файлы их не разделяют