disappearance of background image at bootstrap breakpoint

Hey there, I'm diving into a new journey in web design and I've encountered my first newbie issue. I'm attempting to place an image and text side by side on my web layout, but as soon as the breakpoint hits below 560px, the image disappears and I can't seem to figure out why. I'm hoping someone out there could lend me a hand. Here's the CSS snippet:

.proposito-img {
  background-image: url(../img/competencia.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: visible;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8aaa7a7bcbbbcbaa9b888fde6f8e6f8e5aaadbca9fa">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<div id="#proposito-1" class="container-md mt-5">
    <div class="row">
        <div class="col-md-6 proposito-img">

        </div>
        <div class="col-md-6 fondo-morado texto-blanco g-0 p-5">
            <h3 class="fw-bold texto-blanco">
                Proposito
            </h3>
            <p class="justificado">
                El estudiante fundamentará la importancia de la epistemología, (rama de la filosofía que
                investiga sobre el conocimiento científico y expresa en teorías el resultado de esas
                investigaciones). Con la finalidad de investigar los fundamentos de la educación como
                construcción social de la realidad y sobre la condición educable del hombre.
            </p>
        </div>
    </div>
</div>

htmlcssimagebootstrap-5

Answer №1

Adding a min-height to the element with the class "proposito-img" was necessary because the Bootstrap property "col-" has a min-height of 1px set in the code.

.proposito-img {
background-image: url('https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1352&q=80');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
overflow: visible;
min-height: 250px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="#proposito-1" class="container-md mt-5">
    <div class="row">
        <div class="col-md-6 proposito-img">

        </div>
        <div class="col-md-6 fondo-morado texto-blanco g-0 p-5">
            <h3 class="fw-bold texto-blanco">
                Proposito
            </h3>
            <p class="justificado">
                El estudiante fundamentará la importancia de la epistemología, (rama de la filosofía que
                investiga sobre el conocimiento científico y expresa en teorías el resultado de esas
                investigaciones). Con la finalidad de investigar los fundamentos de la educación como
                construcción social de la realidad y sobre la condición educable del hombre.
            </p>
        </div>
    </div>
</div>

Answer №2

When the screen width reaches or exceeds the md breakpoint, .col-md-6 occupies half of the screen. However, if the screen width is less than the md breakpoint, it vanishes into thin air!

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

Creating a CSV file using an AJAX request in PHP

In my current project involving PHP AJAX DATATABLE within the Drupal framework, I have successfully developed a function to create a CSV file from table records. This function is triggered by clicking a button in HTML or accessing a specific URL. The PHP ...

phpjqueryhtmlajaxcsv

The bootstrap navigation bar appears in a vertical orientation rather than the expected horizontal

My page is displaying the navbar vertically instead of horizontally. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to ...

htmlcssbootstrap-4twitter-bootstrap-4

Is there a way to retrieve the content of a WordPress page minus the HTML tags?

$content = fetch_content(); var_dump($content); <figure class="wp-block-gallery columns-1 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="http://www ...

phphtmlwordpresstags

What are the steps to execute a filter operation on a table by utilizing two select box values with jQuery?

I have a challenge with two dropdown menus. One contains names and the other subjects, along with a table displaying information in three columns: name, subject, and marks. I would like to implement a filter based on the selections in these two dropdowns. ...

javascriptjqueryhtml

Tips for preventing the automatic insertion of tbody tag by Firefox?

My webpage is being rendered client-side using XSL and XML sent by the server. I'm encountering a problem with Firefox adding an implicit tbody tag. The issue arises because my XSL generates certain tbody tags based on certain conditions. However, Fi ...

htmlfirefoxxslthtml-table

Is it possible to display a Processing message at the beginning of a datatables table already containing data?

Within my Laravel 5.7 application, I have implemented the "yajra/laravel-datatables-oracle": "~8.0" library and found a helpful thread on customizing the processing message at this link. I adjusted the processing message styling as follows: .dataTables_pr ...

javascriptjqueryhtmlcssdatatables

Guide to making a slider menu using html, css, and javascript

Just dipping my toes into the world of web development. I'm intrigued by the idea of creating a "slider menu" where users can view and select options by clicking on next or previous buttons (see example image below). While I've got some basic HTM ...

javascripthtmlcss

Tips for positioning icons inserted using the :before method

Is there a way to center align an icon added using the :before method? Below is the current code snippet: <div class="button submit"> <a class="submit check_car_search" href="#" >Some Text</a> </div> CSS: .button a{ backgr ...

htmlcss

Facing a blank page with no errors displayed during the HTML rendering process in Angular version 6

One of the most frustrating aspects of working with Angular is the lack of information provided when there is a render error in an HTML page. Instead of specifying which page the error is in, Angular defaults to the route page and provides no further detai ...

htmlangular

"Troubleshoot: Why is the Position Absolute Not Functioning in

Trying to achieve a layout similar to the last element at the bottom of the footer] 1, but getting something like this instead: <footer> <div class="container-fluid"> <div class="row"> <div class="col-m ...

htmltwitter-bootstrapcss

Use the given URL to set the background image

Having trouble setting a background image for an <a> tag. The image link is set in the background-image:url property, but the image isn't showing up as the background. Here's my code, what could be the issue? <a href="#" data-to ...

htmlcss

How to Customize Password Input Fields in HTML

My input field is set to password type, allowing only a six-digit number: <fieldset> <label for="password-input">Enter New Pin</label> <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" ...

htmlcssinput

What is the process for creating a login page that redirects automatically?

For instance: Whenever I enter gmail.com, it automatically takes me to this link: https://accounts.google.com/signin/v2/identifier?service=mail&passive=true&rm=false&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&ss=1&scc=1&ltmp ...

javascriptphphtmlhttp-redirect

How can you determine whether the CSS of a <div> is defined in a class or an id using JavaScript/jQuery?

Hey there, I'm currently working on dynamically changing the CSS of a website. Let's say we have a div like this: <div id="fooid" class="fooclass" ></div> The div has a class "fooclass" and an ID "fooid", and we're getting its ...

javascriptjqueryhtmlcss

Simultaneous display of icon and text on Bootstrap toggle button

Currently, I am utilizing Bootstrap 3 along with Jquery. Within my coding structure, there is a button that holds an icon within a span tag (specifically using the glyphicon provided by Bootstrap). <button id="swapArchived" class="btn btn-default btn-s ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Setting up only two input fields side by side in an Angular Form

I'm fairly new to Angular development and currently working on creating a registration form. I need the form to have two columns in a row, with fields like Firstname and Lastname in one row, followed by Phone, Email, Password, and Confirm Password in ...

javascriptcssangulartypescriptangular-material

How can I eliminate the gap above the footer in iframes alignment?

I have a setup with four iframes: header, menuframe, bodyframe, and footer. The menuframe and bodyframe are positioned next to each other with space between the footer and the menuframe/bodyframe. How can I remove this space? Here is the CSS: iframe{ ...

cssiframe

Creating dynamic text bubble to accommodate wrapped text in React using Material-UI (MUI)

I am currently developing a chat application using ReactJS/MUI, and I have encountered an issue with the sizing of the text bubbles. The bubble itself is implemented as a Typography component: <Typography variant="body1" sx={bubbleStyle}> ...

htmlcssreactjstypescriptmaterial-ui

Prevent users from accessing the refresh and back/forward functions in all browsers

I'm currently developing an evaluation system where candidates take exams. The page displaying questions and choices is rendered within an iframe. This iframe page also includes a JavaScript timer. To prevent candidates from refreshing the page using ...

jqueryhtmlbrowser

Avoiding text from overflowing a DIV when the parent DIV's width is specified as a percentage

After extensively searching through over 20 similar posts, I have not been able to find a solution that works for my specific issue. The layout of some content I'm working with resembles the example provided here: Check out the Fiddle Example In th ...

cssoverflow