Unable to see background image inside div

Why is the background image not showing up in the left column? I've applied the CSS background-image to .left but it's still not working. Any suggestions on what might be causing this issue? It seems like a small problem, but it's really bothering me.

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row">
  <div class="column left">
  </div>
  <div class="column right">
    <i class="fa fa-unlock fa-2x" aria-hidden="true"></i>
    <h2> You're In </h2>
    <p> You deserve it. Unlock your welcome discount and be the first to know about leaked artwork & exclusive offers. </p>
    <h2> GET $20 NOW </h2>
<form class="omnisend-subscribe-form"><input type="text" class="omnisend-subscribe-input-email" placeholder="Email address" style="width: 100%; height: 50px; display: block; color: #a0a0a0; font-size: 16px; padding: 6px; border: 1px solid #cfcfcf; margin-bottom: 5px; outline-width: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" /><input type="submit" value="I want my $20 off" style="width: 100%; height: 50px; display: block; color: #ffffff; font-size: 16px; padding: 8px; margin-top: 18px; background-color: #f47268; border-width: 0px; -webkit-border-radius: 0px; -moz-border-radius: 3px; border-radius: 0px; outline-width: 0px; cursor: pointer;" /></form>
    </div>
  </div>
 * {
  box-sizing: border-box;
}

.row {
  display: flex;
  border: 1px solid grey;
  align-items: center;
  }

.column {
  text-align: center;

}

 .left {
  width: 50%;
  background-image: url("https://cdn.shopify.com/s/files/1/0196/2898/2334/files/MU6.jpg?2930");
}

.right {
  width: 50%;
  padding: 10px;
}
  @media screen and (max-width: 600px) {
  .left {
    display: none;
  }
    .right {
      width: 100%;
    }
}

Answer №1

Ensure to specify the height property on child elements within a flex container.

Additionally, familiarize yourself with using the console (F12) to inspect elements for debugging purposes.

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  border: 1px solid grey;
  align-items: center;
}

.column {
  text-align: center;
}

.left {
  height: 380px;
  background-size: cover;
  width: 50%;
  background-image: url("https://cdn.shopify.com/s/files/1/0196/2898/2334/files/MU6.jpg?2930");
}

.right {
  width: 50%;
  padding: 10px;
}

@media screen and (max-width: 600px) {
  .left {
    display: none;
  }
  .right {
    width: 100%;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row">
  <div class="column left">
  </div>
  <div class="column right">
    <i class="fa fa-unlock fa-2x" aria-hidden="true"></i>
    <h2> You're In </h2>
    <p> You deserve it. Unlock your welcome discount and be the first to know about leaked artwork & exclusive offers. </p>
    <h2> GET $20 NOW </h2>
    <form class="omnisend-subscribe-form"><input type="text" class="omnisend-subscribe-input-email" placeholder="Email address" style="width: 100%; height: 50px; display: block; color: #a0a0a0; font-size: 16px; padding: 6px; border: 1px solid #cfcfcf; margin-bottom: 5px; outline-width: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"
      /><input type="submit" value="I want my $20 off" style="width: 100%; height: 50px; display: block; color: #ffffff; font-size: 16px; padding: 8px; margin-top: 18px; background-color: #f47268; border-width: 0px; -webkit-border-radius: 0px; -moz-border-radius: 3px; border-radius: 0px; outline-width: 0px; cursor: pointer;"
      /></form>
  </div>
</div>

Answer №2

To ensure the left div has some height, you can specify a certain height since it currently lacks any elements or content to provide height on its own.

Additionally, you have the option to set the background-size property to cover or contain.

Feel free to try out the following code snippet:

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <style>
    * {
      box-sizing: border-box;
    }

    .row {
      display: flex;
      border: 1px solid grey;
      align-items: center;
    }

    .column {
      text-align: center;
    }

    .left {
      width: 50%;
      background-image: url(https://cdn.shopify.com/s/files/1/0196/2898/2334/files/MU6.jpg?2930);
      height: 400px;
      background-size: cover;
      background-repeat: no-repeat;
    }

    .right {
      width: 50%;
      padding: 10px;
    }
    
    @media screen and (max-width: 600px) {
      .left {
        display: none;
      }
      .right {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  
  <div class="row">
    <div class="column left">
    </div>
    <div class="column right">
      <i class="fa fa-unlock fa-2x" aria-hidden="true"></i>
      <h2> You're In </h2>
      <p> You deserve it. Unlock your welcome discount and be the first to know about leaked artwork & exclusive offers. </p>
      <h2> GET $20 NOW </h2>
      <form class="omnisend-subscribe-form">
        <input type="text" class="omnisend-subscribe-input-email" placeholder="Email address" style="width: 100%; height: 50px; display: block; color: #a0a0a0; font-size: 16px; padding: 6px; border: 1px solid #cfcfcf; margin-bottom: 5px; outline-width: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" />
        <input type="submit" value="I want my $20 off" style="width: 100%; height: 50px; display: block; color: #ffffff; font-size: 16px; padding: 8px; margin-top: 18px; background-color: #f47268; border-width: 0px; -webkit-border-radius: 0px; -moz-border-radius: 3px; border-radius: 0px; outline-width: 0px; cursor: pointer;" />
      </form>
    </div>
  </div>
  
</body>
</html>

Answer №3

Check out this Styling:

 .left {
      width: 50%;
       height: 100vh;
       background: url("https://cdn.shopify.com/s/files/1/0196/2898/2334/files/MU6.jpg?2930") center center;
       bacground-size: cover;
    }

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

I am experiencing issues with how the data from the database is being displayed

I'm trying to fetch all my users from the database. The code works, but I believe there is an issue with my syntax and how it's being echoed. As a result, it generates a separate table for each data entry. Check out the attached image for refer ...

What is an easy method for including a broader div within a Y-scrolling container containing multiple divs?

Here is a scenario for consideration: http://codepen.io/anon/pen/NPGKPq Is there a CSS approach, without incorporating Javascript, to display the full width of the blue div? Essentially, rather than having a horizontal scrollbar, only show a vertical scr ...

Using jQuery .css({}) is not causing negative margin to function as expected

$('#thankYouMessage').css({"height": textHeight, "margin-top:": "-52px", "padding-left": "19px"}); The CSS property 'padding-left:' will be applied as expected, but the negative margin will not take effect. The 'margin-top:' ...

The issue of try-catch not functioning properly within a recursive function

Goal My objective is to capture the "Failed to load resource" error and display it in an alert window. Problem I am attempting to handle a video that does not exist. The try catch block is not catching the exception. Scenario I am working on playing vide ...

Disabling Sidebars on Blog Articles Exclusively for Mobile Devices

I own the website Onthecomeupartists.com and am currently using the Impreza Theme 2.10 on WordPress 4.5.2. However, I want to enhance the mobile compatibility of my site by removing the sidebar on blog posts when viewed on mobile devices only, while keepin ...

Transform text and table from using spaces and tabs to using semicolons as separators

Having issues with the formatting of data in one table space and tab separated, needing to separate fields by semicolon. I attempted using awk directly but it didn't work as expected. Decided to create a Perl script for this task with tables styled in ...

What is the process for creating a parent container in which clicking anywhere inside will cause a child container (built with jQuery UI draggable) to immediately move to that location?

This is a rundown of tasks that I am struggling to code more effectively: When the bar is clicked anywhere, I want the black dot button to instantly move there and automatically update the displayed percentage below it. Additionally, when I drag the butt ...

What is the best way to make a div stick to the inside of another div with Bootstrap?

As a newcomer to Bootstrap 4, I am curious if there is a way to affix a div to the bottom of its parent div. My structure involves using the classes .container within a .row, along with several child divs: <div class='container'> <d ...

What is the best way to insert images into a div in Ionic framework?

I am facing an issue with fitting an image inside a div container. Here is my code structure: <div style="background-color: red; height: 200px; width: 200px;"> <ion-img src="{{kategori[i].img}}"></ion-img> & ...

Disable browser autocomplete for Material-UI TextField

I am currently using Material UI version 0.20.0 and I am facing an issue where I need to prevent the password from being saved for a user in a TextField. I tried adding props to the TextField with autocomplete='nope' since not all browsers suppor ...

Combining selected boxes through merging

Looking to create a simple webpage with the following requirements: There should be 10 rows and 3 boxes in each row. If I select 2 or more boxes or drag a box, they should merge together. For example, if my initial screen looks like this: and then I se ...

Problem with rendering Ionic v2 HTML in Angular 2

Issue at Hand: Currently, I am developing a hybrid app using Ionic v2 and everything seems to be functioning correctly. When I use ionic serve, the app works as expected in the browser with no issues. However, when I try running the app on an Android devi ...

Selecting multiple elements with the same attribute value using jQuery

I am looking to target specific DOM elements using jQuery. Below is the HTML code: <li> <span class="node> <span class="con"></span> <span class="check"></span> <img> <a title="high">abc&l ...

Is there a way for the remaining divs in a column to match the width of the widest div?

I'm attempting to ensure that the divs in a column take the width of the widest element, with the exception of the top div which should span 100% of the screen. How can this particular layout be achieved? Please refer to the image below for a clear ex ...

Is there a way to incorporate CSS into an element utilizing jQuery when only a class is available for identification, and when the time in the innerHTML is within a 5-minute range from the current time?

I have some HTML code that I need help with: <td class="mw-enhanced-rc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;18:10&nbsp;</td> My goal is to use JavaScript to make the time bold. $('td[class^="mw-enhanced-rc"]').eac ...

align video element to the right within a container div

I'm attempting to align a video element to the bottom right inside a div. Here is the code I have so far, which successfully aligns the video element to the bottom but not to the right side of the div container: video { } .border.rounded-0.border- ...

I require the box element within my section element to have a full-width layout

Looking at the code in the image, you can see that I am using MUI components. Within a section, there is a box containing navigation filter links. The red part represents the section, while the white inside is the navigation link bar. My goal is for this b ...

Scroll up and down to witness the enchanting interplay of fading in and out

Looking to expand upon the solution given in this response. The existing code effectively fades in an element while scrolling down and fades out an image when scrolling up; however, it lacks the functionality to fade out when scrolling down. I am aiming ...

Improprove the performance of external banner ads by utilizing asynchronous loading or caching techniques

My website is slick, elegant, and loads quickly - that is until the banner ads come into play! A delay of up to 10 seconds in loading occurs due to waiting for the ads, which is frustrating considering the effort I put into optimizing the rest of the site. ...

What is the process for defining a date range in HTML5?

I am currently working on a wedding website and I am trying to set up a countdown for the wedding date. However, I am having trouble figuring out how to correctly display the countdown. https://i.sstatic.net/iGikh.png Here is the code snippet that I am u ...