Troublesome Bootstrap 4 - Struggling to Expand Background Image Within Div

I am currently working on a website that focuses solely on maximizing screen space. The design includes a logo in the upper center of the page, a full-width navbar, and two rows of three full-width images that may be cropped based on resolution. See the sketch here.

However, I am encountering an issue where the images set as a background of the col-sm-4 div are not displaying, and their height remains at 0px despite my attempts to adjust it using !important. I have tried setting the height in percentage and using background-size: cover, but the code does not respond consistently across different resolutions. How can I ensure these images maintain the 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">    
    <!-- Custom 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>

    <!-- Title -->
    <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>
    </main>
</body>

</html>

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you want the simplest method, try setting a minimum height using vh units (a percentage of viewport height) on the .image division...

https://www.example.com/code-sample

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

Update:

To make the images take up the remaining page height without scrolling, apply flex-grow and set overflow to hidden on the .Images container.

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

https://www.example.com/code-sample (recently updated)

Answer №2

If you want your images to be responsive in Bootstrap 4, simply apply the img-fluid class to them as shown below:

<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://placedog.net/640/480/tech">
        </div>
        <div class="col-sm-4 image" id="image12">
            <img class="img-fluid" src="https://placekitten/640/480/any">
        </div>
    </div>
</main>

Answer №3

A helpful tip from Temani Afif suggests that you should include a specific height for the parent element. It is recommended to define the height in your .image class as height: 200px; instead of using 100%.

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

The click event fails to provide $event upon being clicked

Within my HTML structure in an angular 7 application, I have the following setup: My goal is to trigger the GetContent() function when any text inside the div is clicked. Strangely, when clicking on the actual text, $event captures "Liquidity" correctly. ...

javascripthtmlangular

The flexibility of the flex-wrap property does not extend to affect nested elements

Check out this example first: http://jsfiddle.net/8ofrs0y7/14/ <div class="flex-group"> <ul class="flex-container red"> <li class="flex-item"&g;1</li> <li class=&qu ...

htmlcssflexbox

Typescript does not produce unused members

Having an issue with the JS code that TypeScript compiler is generating. Here's an example class: // Class export class UserDTO { Id: number; FirstName: string; LastName: string; DateOfBirth: Date; getFullName(): string { ...

javascripttypescriptknockout-mapping-plugin

What is the best way for me to determine the average number of likes on a post?

I have a Post model with various fields such as author, content, views, likedBy, tags, and comments. model Post { createdAt DateTime @default(now()) updatedAt DateTime @updatedAt id String @id @default(cuid()) author U ...

javascriptnode.jstypescriptormprisma

What is the best way to add custom styles to Material UI tabs in a React application?

I need help styling my material UI tabs within a react component. I am having trouble getting the styles applied correctly, specifically setting the background color and box shadow of the entire bar, as well as defining the indicator background color and u ...

cssreactjsmaterial-uinavigation

Adjustable <a> component

There is this element: <a id="lnkViewEventDetails" class="psevdo calendar-event event" style="height: 126px;" href="/someurl/895?responseType=5" onclick="event.stopPropagation();"> I am trying to make it resizable using JQuery UI: $("#lnkViewEvent ...

javascriptjqueryhtmljquery-uijquery-resizable

I am looking to sort through the data based on the courseCode, but I can't seem to find a way to do it

Here is the JSON data after converting it with res.json() I attempted to filter it based on course code, let's say the code is: 301. I am confused about how to achieve this using JavaScript because of the nested structure. Here is the code snippet I ...

javascriptnode.js

Identify the occurrence of isolated "<" or ">" characters in a string that includes HTML elements

As an example, consider a string similar to: "This is a <b> Sample </b> string with characters < 100" The user has the ability to include HTML tags such as <b>, <div>, and more. These tags are permitted in this scenario. The ma ...

html

How come ng-class doesn't apply to a specific class name?

I recently wrote the following code: <style> .dotted { border:dotted; } </style> .... <p ng-style="mystyle" ng-class="dotted">{{ answer }}</p> My intention was to have the paragraph element enclosed within a ...

javascriptcssangularjsng-classangularjs-ng-class

How to handle JavaScript exceptions when encountering a null JSON value?

I am receiving data in JSON format using AJAX from an action in Struts 2 for my view. The data consists of a set of information. For example: {"home": "1234", "room": null} When I try to read data.home, I successfully get the value 1234. However, when a ...

javascriptjqueryjson

The scrollbar in the InfoWindow of an Angular GoogleMaps marker is not being hidden

Is it possible to customize the popup info window that appears when a marker is clicked, without having a scrollbar on the right if the content overflows? Visit this link for an image (image didn't load when using the image template) I've attem ...

cssangular

Querying MongoDB to filter data using multiple conditions simultaneously

How can MongoDB be used to filter documents based on multiple fields and value types? In my dataset, I have documents with different fields that I want to use as filters to retrieve specific documents. For example: The Person field can have values like ...

javascriptnode.jsmongodbexpressmongodb-query

Ways to conceal the contents of a page behind a transparent background div while scrolling

I created a Plunkr with the following markup: <body> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <nav class="navbar navbar-fixed-top"> <div class="container-fluid"& ...

htmlcsstwitter-bootstrap

Changing the color of placeholder text in MUI 5 TextField

Looking to customize the text color and placeholder text color in my MUI TextField component to be green https://i.sstatic.net/NZmsi.png The documentation doesn't provide clear instructions, so I attempted a solution that didn't work: <TextF ...

javascriptcssreactjsmaterial-ui

Placing a stacked column underneath existing columns with Foundation grid technology

Can Foundation's grid system be used to achieve the following layout? On Large Screens ################ ################ # # # # # # # Col 2 # # # # # # # ...

htmlcsszurb-foundation

One way to automatically create unique reference numbers is to generate a random number between 1 and 99 and append it to a date format, such as YYMMDD. For example,

I have a code that generates numbers like 030317-001 to 030317-010 in a list. How can I modify it so that the same sequence is generated with just one button click, without any repeats, up to a maximum of say 030317-099? <?php $x = date("dmy");// ...

phphtml

A margin is set on a div element that occupies 100% width and 100% height, nestled within another div element also occupying 100% width and

As I work on constructing a website with a video background, my goal is to ensure that all divs are centered and responsive by setting the width and height to 100%. Additionally, I have implemented an overlaying div that fades in and out upon clicking usin ...

htmlcssmargincentering

Which is better for narrowing object property types: using dot notation or object literal notation?

Is there a reason why type narrowing by assignment behaves differently based on whether we use dot notation or object literal notation? Below are two examples to illustrate this discrepancy. type MyObj = { x?: number | string } let obj1: MyObj = {} obj1.x ...

javascripttypescript

Rearrange the sequence of numbers using JQuery when an HTML element is deleted

I'm currently working on a simple functionality where I have 5 rows, each with its own number. So initially, the rows are numbered from 5 to 1. If I remove a value like 3, the sequence should adjust to 4, 2, 1, indicating that I now have only 4 rows ...

javascriptjqueryhtmlcss

Unexpected behavior observed in JavaScript and AJAX functionality

In my web development project, I've decided to incorporate JavaScript and AJAX for the signup form functionality. However, I seem to be facing some challenges as I try to post all the textbox values from the signup form through AJAX. The code snippe ...

javascriptjqueryajax