I am trying to layer 3 x 3 images on top of a background image, but the images are overlapping

I am in the process of creating a website using bootstrap 4. I have a background image that needs to have nine smaller images overlaid on top. However, the images are currently overlapping each other and need to be arranged properly. This layout also needs to be responsive for different screen sizes.

Below is my current code:

        <div class="col-md-4  col-sm-4" >
            <div class="column">
            <img src="assets/images/bg.png" class="img-responsive" >
            </div>
        </div>

        <div class="col-md-4 col-sm-4 " >
            <div class="column">
            <img src="assets/images/bg.png" class="img-responsive">
            </div>
        </div>

        <div class="col-md-4  col-sm-4" >
            <div class="column">
            <img src="assets/images/bg.png" class="img-responsive" >
            </div>

        </div>  
    </div>

Here is an example image

htmlcssbootstrap-4

Answer №1

To change the background image of the div, please refer to this helpful JSFiddle demonstration.

body {
  background-image: url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  background-size: cover;
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
  height: 100px;
}

.background1 {
  background-image: url(https://mdbootstrap.com/img/Photos/Others/background.jpg);
  background-size: cover;
}

.background2 {
  background-image: url(https://img.freepik.com/free-vector/abstract-low-poly-design-background_1048-8196.jpg?size=338&ext=jpg);
  background-size: cover;
}

.background3 {
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPgx2MsZXRF0vNZ2_UX9VPouShDW33Ug4LBLzoAi_bPuqZdH0j);
  background-size: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col background1">
      1 of 3
    </div>
    <div class="col background2">
      2 of 3
    </div>
    <div class="col background3">
      3 of 3
    </div>
  </div>
</div>

Answer №2

If you're looking to create a stunning fullscreen background image, you can adjust the min-height value to achieve the desired effect.

Check out this simple example: https://codepen.io/brooksrelyt/pen/REzMZW

Here's how you can set it up:

<div class="full-home" style="background-image:url('https://via.placeholder.com/1200x800');" ></div>

And the corresponding CSS:

.full-home {
    width: 100%;
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-position:50% 50%\9 !important;
    background-size: cover;
    min-height: 100vh;
}

Feel free to adapt the code provided above with your own image URLs for a customized look.

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

Extracting HTML Data in Point of Interest (POI)

When creating a spreadsheet report using POI, I often come across html content with various tags like <p>, <b/>, &nbsp;, etc. Is there a way to parse these html tags in POI? Are there any functions in POI that can handle html content? Here ...

htmlexcelhtml-parsingexport-to-excel

Using JQUERY, CodeMirror adds elements to the HTML editor

I have been utilizing CodeMirror for my project, specifically the "HTML Editor With Preview" module. To test its functionality, I created a fiddle: --> http://jsfiddle.net/Vu33n/6/ While I successfully got the editor to work, I am currently facing an ...

jqueryhtmleditorcodemirror

Enhancing the appearance of HTML code within x-template script tags in Sublime Text 3 with syntax highlighting

I recently updated to the latest version of sublime text (Version 3.1.1 Build 3176) and have encountered a problem with syntax highlighting for HTML code inside script tags. Just to provide some context, I'm using x-template scripts to build Vue.js c ...

javascripthtmlvue.jssublimetext3syntax-highlighting

Unusual occurrence: unexpected positioning issue with iOS and Chrome (Windows)

My website looks perfect on Firefox, but unfortunately, it's not displaying correctly on Safari (iOS) and some Chrome devices. The Menu-Bar, which should be position fixed, is not showing properly. I'm not sure what the issue is. Screenshots: ...

ioscssgoogle-chromecss-position

The onClick event cannot be triggered within a div that is generated dynamically

I am having an issue with a jquery code that dynamically generates a div. The problem I'm facing is that the onclick function for the anchor tag is not calling the required function. Below is the code snippet: $("#new").append(' <ul cla ...

javascriptjqueryhtmlajax

What could be causing these transformed canvases to not display fully in Chrome at specific resolutions?

fiddle: https://jsfiddle.net/f8hscrd0/66/ html: <body> <div id="canvas_div"> </div> </body> js: let colors = [ ['#000','#00F','#0F0'], ['#0FF','#F00','#F0F&a ...

javascriptcssgoogle-chromehtml5-canvas

Determine the exact location where the mouse was clicked on a webpage containing an iframe

I am trying to retrieve the mouse position on my HTML page, but I am encountering some issues. Here's what I have so far: document.onclick = function(click) { if (click.clientX<340){ myControl.inputs.selection = false; btnRotate.remove ...

javascripthtml

Ways to soften a section of a canvas component?

What is the simplest way to apply a blur effect to a specific portion of my canvas element? I am utilizing the JavaScript 3D Library known as three.js. This library simplifies the use of WebGL. While they offer examples of blur and depth of field effects, ...

javascripthtmlthree.jshtml5-canvas

Can anyone suggest a method to set up a group chat without the need for a database?

I am interested in setting up a group chat where all messages and corresponding usernames are stored in a JSON file. However, achieving this without the use of node.js or MySQLi seems to be quite challenging. Currently, I am able to read the JSON file an ...

phphtmlcssjsonajax

Fill the center circle with GoJs background

Is there a specific way to paint the center circle only? I have provided an example project below. ...

javascripthtmlgojs

What is the best way to retain data after clicking a button?

I am facing an issue where I need to figure out how to add information to a new page when a button is clicked. For example, let's say I have an "add to cart" button and upon clicking it, I want to store some data. How can I achieve this functionality? ...

javascripthtmlcss

Safari displaying incorrect sizing for table nested in inline-flex container

When a <table> is placed within an inline-flex container that has a flex-direction of column, Safari displays the table with a different cross-size compared to Chrome and Firefox. This discrepancy makes me question if Safari's default display fo ...

htmlcssflexboxsafari

Endless Google Locations Instances

My database entries are being displayed in a table using input fields. I want the Location field for each entry to be automatically completed using Google's API. HTML: <input name="edit_airplane[1][location]" type="text" class="airplane_location" ...

javascriptjqueryhtmllocationgoogle-places-api

How can I remove the popover parents when clicking the confirm button using jQuery?

I am having trouble sending an AJAX request and removing the parent of a popover after the request is successful. I can't seem to access the parent of the popover in order to remove it, which is causing me some frustration. // Code for deleting w ...

javascripthtmljquery

Offspring element overrides styling of its parent

#popBox{ width:100%; height:100%; position:fixed; left:0; top:0; border-collapse:collapse; background:black; opacity:0.8; display:none; } <table id="popBox"> <tr> <td></td> <td></td> ...

htmlcss

Accepting user input in a PHP for loop

Almost there, but I'm having trouble with a loop in my PHP code. The issue is that the code doesn't wait for user input and continues on. I've included my code below. The Excel spreadsheet starts at row 4 with multiple choices. Once a choice ...

javascriptphphtmlarraysexcel

What's the issue with the submit button not functioning on the form?

After downloading a sample form, I encountered the following code: <form id="login-user" method="post" accept-charset="utf-8" action="/home.html" class="simform"> <div class="sminputs"> <div class="input full"> <l ...

javascripthtmlcssforms

Using CSS animations to animate a div while creating a subtle pause between the two

I am working on creating a notification bar that will be displayed and hidden using CSS animation. My challenge is finding the right delay between the two animations. HTML <div id="notification" class="alert" role="alert"></div> JS $(' ...

jqueryhtmlcssanimation

What is the best way to ensure the footer remains in an automatic position relative to the component's height?

I am struggling to position the footer component correctly at the end of my router-outlet. After trying various CSS properties, I managed to make the footer stay at the bottom but it acts like a fixed footer. However, I want the footer to adjust its positi ...

htmlcssangularangular-material

Is it possible for me to reply to packets that are transmitted to a website?

I'm currently working on a Python program that sends a 'hello' packet to the server and I'm wondering if I can get the server to respond based on that. Here's the code snippet I'm using to send the packet: import requests hL = ...

javascriptpythonhtmlpython-3.x