Struggling to set a background image for multiple div elements

Hey everyone! I'm working on a small school project website and I've run into an issue with the background on multiple div elements. Here's my HTML code snippet:

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

</div>

And here is my CSS code:

.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;
}

This is just a part of the code where the issue occurs. If you have any suggestions or tips, please let me know so I can update it here.

Since yesterday, I've been trying to make progress. Here's the updated HTML code:

`<!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>

And here is the updated CSS code:

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&display=swap');

.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;
}

Answer №1

remove the bloc-1 element that is adjacent to block-1-img

adjust bloc-1-text height to 100vh instead of 100%

confirmed the changes on my personal computer and it was successful

Answer

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues arise when using the "placeholder" attribute within a <p:inputText tag while the inputText is devoid of any value

A current project involves implementing JSF Mojarra 2.3.9.SP02 alongside PrimeFaces 7.0 on Wildfly 17 using the Sapphire template provided by PrimeFaces. However, I've encountered a significant issue with a specific <p:inputText element within my f ...

Is there a way to selectively display a portion of my CSS class based on certain conditions?

Is there a way to conditionally render all of the css inside the following hover psuedoclass based on a variable (data) being not null? Within my React Component that utilizes Material UI makeStyles, I have the following styles: const useStyles = makeStyle ...

No reversematch error occurs despite the successful import of the primary key

Even though the pk has been imported, I am still getting a NoReverseMatch Error. Error Traceback: Reverse for 'profile_page' with no arguments not found. 1 pattern(s) tried: ['profile_page/(?P<pro>[^/]+)$'] My urls.py configurat ...

Switch between showing the Font Awesome TitleText and its associated Class with a single click

Can the value of the title attribute for <i> be toggled? For example, if the title is set to <i title="Favorite This Post" class="fa fa-star-o" aria-hidden="true"> within <div class="postoption"> I would like to toggle both the title te ...

Displaying an array value instead of a new value list in a React component

Situation - Initial number input in text field - 1 List of Items - 1 6 11 Upon removing 1 from the text field, the list becomes - New List Items - NaN NaN NaN Now, if you input 4 in the field. The updated List Items are - NaN NaN 4 9 14 Expected ...

Concealing a Parent Container Using jQuery

I've been attempting to hide a certain div with a value of 9, but my current method doesn't seem to be working... The Hide Function I'm Using: <script> $('.hhpt-housebox').each(function() { if($(this).val() < 9 ...

Design a Unique CSS Shape

Do you have any suggestions on how to create this shape using only CSS, without SVG paths? Thank you in advance! Check out the screenshot here ...

"Resolving the issue with unnecessary line breaks in Optimizepress when input is contained within a paragraph

I am experiencing an issue with the code on my server: <p>This is a test to determine why the <input type="text" style="text-align: center;" value="input"/> element appears on a new line when displayed on a wordpress page.</p> When view ...

Tips for stacking objects vertically in mobile or tablet view using HTML and CSS

I have been diligently working on a project using a fiddle, and everything appears to be running smoothly in desktop view. The functionality is such that upon clicking any two product items (with one remaining selected by default), a detailed description ...

Utilizing Beautifulsoup to extract elements from Selenium

When utilizing BeautifulSoup with Selenium, I usually start by parsing the entire page using soup = BeautifulSoup(driver.page_source). But what if I only want to parse a specific element from Selenium in BeautifulSoup? If you try the following code snipp ...

Experiencing difficulty retrieving text using Selenium WebDriver in Python

I am using Selenium WebDriver to extract text from a specific box on this website. Check out my code below: from os import system from selenium import webdriver driver = webdriver.Chrome("./chromedriver") driver.get("http://www.lutanho.ne ...

What is the reason behind why decimals don't automatically pre-fill like integers do?

Seeking help with an HTML issue - I have a field pre-filled with a decimal number, but it's not displaying the value when loaded. The field should accept both integers and decimals, but only integer values are showing up correctly. I've spent ho ...

Change element position to relative while scrolling

I created a wrapper with an animation similar to the one on Apple's Airpods Pro page. It features a video that plays gradually as I scroll, with the text smoothly scrolling over it within a specific area (text-display). So far, this part is working w ...

SCSS: When hovering over one div, display a different div

My goal is to display the elements in another div when hovering over a specific div. However, my current code does not seem to be working as expected. At the moment, there is no response upon hover and it remains non-responsive. I would greatly appreciate ...

Show the layout of the table in a visual format

I am struggling to showcase a table created using <ul> tags. I want the content to be displayed one after the other. Here is my code: CSS .activity-list-header > li { display: inline-block; text-align: left; width: 15.666%; list- ...

Is there a way to enable Fancybox to change to the adjacent gallery by simply using the 'up' or 'down' arrow keys?

I am currently working on a layout that consists of a vertical column of thumbnail images, each linked to its own gallery with additional images. When the user clicks on a thumbnail image, Fancybox opens, allowing them to navigate through the images within ...

Adjust choices in a dropdown menu based on the selection of another dropdown menu

I am attempting to create a scenario where selecting an option from one dropdown list will dynamically change the options available in the next dropdown list. You can find my code on jsfiddle <!DOCTYPE html> <html> <body> &l ...

"Switching Classes with a Click Event: A Step-by-

This script is designed to work with SoundCloud's widget in order to enable remote text buttons. I am attempting to modify it so that it functions as a remote for an image button that toggles between different pictures for pause and play, rather than ...

Tips for organizing labels and user input within an HTML document

I attempted to align inputs and labels horizontally. Here is what I tried: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="span2"> <h2& ...

Looking to enhance the accessibility of a dynamically generated file by implementing the ability to expand and collapse sections as parent nodes

Currently working on a webpage where I am showcasing a testsuite file as the parent node and test cases within the testsuite file as child nodes. I have added checkboxes to both the parent and child nodes. Now, my goal is to include an ex ...