CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapbootstrap-4
Blank
Blank

Reputation: 155

Bootstrap 4 - I can't stretch background image in div

I'm trying to make a website, which is using just screen space.

Logo is in the upper middle of the page, full width navbar and then 2 rows of 3 full width images, which would be cropped as resolution allows. Here is the sketch.

My problem is that images, which are set as a background of the col-sm-4 div are not showing and their height is set to 0px (I tried !important). The code is not reacting on height in % or background-size - cover. How can I make these images precisely on page with same height on every resolution?

@import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative');
         @import url('https://fonts.googleapis.com/css?family=Cinzel');
        /*ALL*/
         html, body {
            height: 100% !important;
             width: 100% !important;
        }
         body {
            background: grey !important;
        }
         header {
            height: 15% !important;
        }
         .Menu {
            height: 5% !important;
        }
         .Images {
            height: 80% !important;
        }
        /*Header*/
         .logo {
            display: inline-block;
             padding: 1rem 0 .5rem 0 !important;
        }
         .col-sm-4 {
             border: solid 1px #9f0000;
        }
         .Images {
        }
         .image {
             background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
             height: 100%;
             background-position: center;
             background-repeat: no-repeat;
             background-size: cover;
        }
        /* NavBar */
         nav {
            font-size: 13pt;
             font-family: 'Cinzel', sans-serif;
             padding: .3rem 0 .3rem 0 !important;
             text-transform: capitalize;
        }
         .nav-link {
            color: #fff !important;
             margin: 0 25% 0 25%;
        }
         .nav-link:hover {
            font-style: underline;
        }
<!DOCTYPE html>
<html lang="cs">

<head>
    <meta charset="utf-8">
    <!-- Mobile adaptation -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <!-- Mine Stylesheet -->
    <link rel="stylesheet" href="stylesheet/stylesheet.css">
    <!-- Imported Stylesheets -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>


    <!-- Scripts (jQuery) -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

    <!-- Tittle -->
    <title>Geo Expo</title>

</head>

<body>
    <main class="container-fluid p-0">
        <header class="row Logo no-gutters">
            <div class="col-sm-3">
                <header>
                    <img class="logo d-block img-fluid mx-auto" src="./logo/PNG.png" alt="Logo" />
                </header>
            </div>
        </header>
        <div class="row Menu no-gutters">
            <div class="col-sm-12">
                <nav class="navbar navbar-expand-lg">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
                            </button>
                    <div class="collapse navbar-collapse" id="Toogle">
                        <ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Repliky</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Unikáty</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Instalace</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Kontakt</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
        <div class="row Images no-gutters">
            <div class="col-sm-4 image" id="image00"></div>
            <div class="col-sm-4 image" id="image01"></div>
            <div class="col-sm-4 image" id="image02"></div>

            <div class="col-sm-4 image" id="image10"></div>
            <div class="col-sm-4 image" id="image11"></div>
            <div class="col-sm-4 image" id="image12"></div>
            <!--  <div class="col-sm-4">
                        <img class="image" src="./images/bridge.jpg" alt="Bridge">
                    </div>
                    <div class="col-sm-4">
                        <img class="image" src="./images/park.jpg" alt="Park">
                    </div>
                    <div class="col-sm-4">
                        <img class="image" src="./images/tunnel.jpg" alt="Tunnel">
                    </div>
                    <div class="col-sm-4">
                        <img class="image" src="./images/bridge.jpg" alt="Bridge">
                    </div>
                    <div class="col-sm-4">a
                        <img class="image" src="./images/park.jpg" alt="Park">
                    </div>
                    <div class="col-sm-4">
                        <img class="image" src="./images/tunnel.jpg" alt="Tunnel">
                    </div> -->
        </div>
    </main>
</body>

</html>

Upvotes: 1

Views: 3500

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362390

The easiest way is to set a min-height using vh units (% of viewport height) on the .image DIV...

https://www.codeply.com/go/iFDwwGDmKi

.image {
     background-image: url("..");
     min-height: 45vh;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}

Edit:

To have the images fill the remaining page height, w/o scrolling, set flex-grow and overflow hidden on the .Images container.

.Images {
    flex-grow: 1;
    overflow-y:hidden;
}

https://www.codeply.com/go/iFDwwGDmKi (updated)

Upvotes: 2

WebDevBooster
WebDevBooster

Reputation: 14954

You just need to add the native Bootstrap 4 class img-fluid to your images like so: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<main class="container-fluid p-0">
    <header class="row Logo no-gutters">
        <div class="col-sm-3 mx-auto">
            <header> 
                <img class="logo d-block img-fluid mx-auto" src="https://placehold.it/120x60" alt="Logo" />                     
            </header>
        </div>
    </header>
    <div class="row Menu no-gutters">
        <div class="col-sm-12">
            <nav class="navbar navbar-expand-lg">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Toogle" aria-controls="Toogle" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"><i class="fa fa-bars mx-auto" aria-hidden="true"></i></span>
                </button>
                <div class="collapse navbar-collapse" id="Toogle">
                    <ul class="navbar-nav mt-2 mt-lg-0 mx-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Repliky</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Unikáty</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Instalace</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Kontakt</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div class="row Images no-gutters">
        <div class="col-sm-4 image" id="image00">
            <img class="img-fluid" src="https://placeimg.com/640/480/arch">
        </div>
        <div class="col-sm-4 image" id="image01">
            <img class="img-fluid" src="https://placeimg.com/640/480/animals">
        </div>
        <div class="col-sm-4 image" id="image02">
            <img class="img-fluid" src="https://placeimg.com/640/480/nature">
        </div>

        <div class="col-sm-4 image" id="image10">
            <img class="img-fluid" src="https://placeimg.com/640/480/people">
        </div>
        <div class="col-sm-4 image" id="image11">
            <img class="img-fluid" src="https://placeimg.com/640/480/tech">
        </div>
        <div class="col-sm-4 image" id="image12">
            <img class="img-fluid" src="https://placeimg.com/640/480/any">
        </div>
    </div>
</main>

Upvotes: 1

reiallenramos
reiallenramos

Reputation: 1295

As pointed out by Temani Afif, you didn't specify any parent with a specific height. Specify the height in your .image class instead of 100%, i.e. height: 200px;

Upvotes: 0

Related Questions