How to display to two background-images side-by-side

Question

I'm trying to put two images side-by-side (occupying the rest of the body) bellow my header, but I didn't find I good solution yet.

I want these two images to be a link for two different pages.

I have tried different things but neither of them worked.

HTML:

<body>
    <div class="header">
        <div class="logo">
            <img src="C:\Users\cristovao\Documents\vscode\real_estate\icons\logo_final.png">
            <div class="lettering">
                <h6><span class="bolder">F</span>ÁTIMA<span class="bolder">C</span>RISTÓVÃO <span class="smaller">by KELLER WILLIAMS</span></h6>
            </div>
        </div>
        <div class="wrapper">
            <div class="nav">
                <ul>
                    <li>
                        <a href="./home.html">Home</a> 
                    </li>
                    <li>
                        <a href="./project.html">Projects</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="box">
            <a href="./Atower.html">
                <img src="./IMAGENS/CI02_00_SALA_P6_4K.jpg" width="100%" >
            </a>
        </div> 
        <div class="box">
            <a href="./muda.html">
                <img src="C:\Users\cristovao\Documents\vscode\real_estate\IMAGENS\CASA B (3).jpg" width="100%" >
            </a>  
        </div>    
    </div>
</body>

CSS:

     body {
     margin: 0px;
     padding: 0px;
     }
    .container {
     display: inline-flex;
     }

    .box {
    width: 50%;
    }

 .container {

 float: left

 }

 .box {
width: 50%;
}

All my code is here;
It seems that using flexbox or float I cannot display each image with half of 
the total width each, and 100% of the body height, I always have 50% of the 
height below the images in white, 
(representing body content) when I use flexbox and 50% of white space right when I use float.
Hope anyone can help me
Br

score 0 · Answer 1 · answered Aug 28 '19 at 21:14

0

Use flexbox and set margin:0 and padding:0.

.container {
 display: inline-flex;
 margin:0;
 padding:0;
}

.box {
 width: 50%;
 margin:0;
 padding:0;
}

answered Aug 28 '19 at 21:14

PaulProgrammer

16,175
4
39
56

Hi Paul I already have margin:0 and padding:0 as body rule – Pedro Cris Aug 29 '19 at 13:52

score 0 · Answer 2 · answered Aug 28 '19 at 21:26

Make the <a> tag a block styled element so it neatly wraps your image. Then stretch your image to the full height and width of its parent and use object-fit: cover to make the image fill your box.
This will have the same effect as on a background-image with the background-size set to cover.

.box a {
    display: block;
    width: 100%;
    height: 100%;
}

.box img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

Hi Emiel, It looks the same I have 100% of the body width occupied but only 50% of the body height used by the image and I wanted 100% br — Pedro Cris, Aug 29 '19 at 14:30

How to display to two background-images side-by-side

2 Answers2