How can we align images above one another in a responsive manner using Bootstrap 3?

Looking for assistance with aligning and overlapping images on top of another image in Bootstrap while maintaining responsiveness. I've attempted the following:

HTML:
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="images/book_bg.png" class="img-responsive"/>
<ul class="row">
<li class="col-lg-6"><img src="images/Desert.jpg" class="img-responsive"/></li>
<li class="col-lg-6"><img src="images/Hydrangeas.jpg" class="img-responsive"/> </li>
</ul>
<ul class="row">
<li class="col-lg-6"><img src="images/Jellyfish.jpg" class="img-responsive"/></li>
<li class="col-lg-6"><img src="images/Koala.jpg" class="img-responsive"/> </li>
</ul>
</div>
</div>
</div>

CSS: ul { width: 100%; } li { width: 49%; float: left; }

Issue: Having trouble getting the images to align properly with the background image. Any suggestions? https://drive.google.com/file/d/0Bwyjk1QbhhGGRVZxZkgxMk5RNlk/edit?usp=sharing download the image here

csstwitter-bootstrap

Answer №1

To enhance this section of HTML, consider adding an id:

<img src="images/book_bg.png" class="img-responsive" id="background_image"/>

Next, apply CSS styling to this id using absolute positioning:

#background_image {position: absolute}

Regarding the vertical alignment mentioned in the comment:

There are various discussions on this topic. Here are a few examples:

Question 1 Question 2 Question 3

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

Learn to Generate a Mathematical Quiz with Javascript

For a school project, I am tasked with developing a Math Quiz which showcases questions one at a time. The questions vary in type, including Multiple Choice, Narrative Response, Image Selection, Fill in the blank, and more. I require assistance in creatin ...

javascriptjqueryhtmlcssbootstrap-4

"Want to know how to control a JavaScript onClick event to play and pause? Find

Being new to JavaScript, I am curious about how I can Play and Pause a JavaScript on an HTML page. In my first JavaScript file, I have a toggle button that onClick show/hides a div element tag, as shown below: $(function () { $(".toggleSideba ...

javascriptphphtmltwitter-bootstrapcodeigniter

Animated the height of a rectangle during initial loading and when the mouse hovers over or leaves

Being new to Vue.js, I am looking to create a simple animation on component load for the first time. You can find my initial code here: <template> <div id="app"> <div class="rect" /> </div> </template ...

javascriptcssvue.jscss-transitions

Various web browsers (display: -webkit-inline-box;)

Recently, I encountered an issue with my CSS code: .tudo ul { width: 100%; margin: 0px; display: -webkit-inline-box; } Surprisingly, Mozilla Firefox does not recognize the following line: display: -webkit-inline-box; Is it possible to set d ...

cssbrowser

When the flex-grow property is set to 1, the height of the div extends beyond the space that

Here is an example of some HTML code: .container { height: 100%; width: 100%; display: flex; flex-direction: column; padding: 10px; background-color: aqua; } .box { width: 100%; height: 100%; flex-grow: 1; background-color: cadetb ...

htmlcssangularflexbox

Choosing a Radio Button with a Labeled Option

I'm experimenting with a method to style radio buttons by concealing them and inserting an alternative image as the background of the corresponding label (similar to this technique). In my test, I attempted to apply CSS to the radio button label: inp ...

htmlruby-on-railscssradio-button

Tips for pausing keyframes animation on its final animation frame

Is there a way to halt my animation at the 100% keyframe? What I'm attempting to accomplish is animating these boxes so that when you click on the top one, it moves to the bottom and vice versa. Any suggestions or ideas on how to achieve this? <h ...

javascriptjqueryhtmlcssanimation

What is the best way to position an element in the center of the screen

What is the best way to vertically center a button within a div? Click here for an image of the issue I recently started learning HTML & CSS and I am struggling to align a button in the vertical center of a div. Text-align:center doesn't seem to be ...

htmlcss

Removing border of the top and bottom of jspdf pages

In my project, I am utilizing a combination of html2canvas, canvg, and jspdf to convert HTML content (which includes SVG graphs) into canvases for the purpose of creating a PDF file. To address some page-break issues, I have resorted to creating multiple c ...

javascriptcsshtml5-canvasjspdfhtml2canvas

Implementing personalized SVG icons for list items

Here is some HTML code along with SCSS that I need help with: <div class="risk"> <ul> <li><span>Aggressive</span>Lorem ipsum dolor ...</li> <li><span>Growth</span>doloremque autem...</li ...

htmlcsssvg

How can Material UI React handle long strings in menu text wrapping for both mobile and desktop devices?

Is there a way to ensure that long strings in an MUI Select component do not exceed the width and get cut off on mobile devices? How can I add a text-wrap or similar feature? Desktop: https://i.sstatic.net/lo8zM.png Mobile: https://i.sstatic.net/8xoW6. ...

javascriptcssreactjstypescriptmaterial-ui

Prevent scrolling within input field

I have a text entry field with background images that separate each letter into its own box. Unfortunately, an issue arises when I reach the end of the input: the view automatically scrolls down because the cursor is positioned after the last letter enter ...

javascripthtmlcssinputscroll

Adding the !important rule in React inline CSS effortlessly

Is there a way to include !important in my inline CSS property without disrupting the entire style? import React from "react"; export default class Todo extends React.Component { render() { const {text} = this.props; const cardStyl ...

cssreactjs

the neighboring div sliding to the left causing the div not to expand with its content

I am trying to create a website similar to this one. When I click on the arrow, the left div collapses and the right one expands. However, the content of the right div does not expand as expected! Below is my HTML code: <div class="tools-bg"> & ...

jqueryhtmlcss

Setting the parent's height to match one of its children

I'm struggling to align the height of the pink '#images-wrap' with the main image. When there are too many small rollover images on the right, it causes the pink div to extend beyond the main image's height. If I could make them match i ...

javascripthtmlcss

What is the best way to make hover text that also copies when you highlight the main text?

Currently, I am utilizing a basic bootstrap tooltip for creating tables with jQuery. However, I require a specific functionality that the standard bootstrap tooltip does not provide. I need the ability to copy the base text and have it appear as "base tex ...

jqueryhtmlcssbootstrap-4

Issue with Table Element's Full Width Within Parent Element

Here is a demonstration of the scenario in JSFiddle I have made updates to the JSFiddle demonstration here: http://jsfiddle.net/x11joex11/r5spu85z/8/. This version provides more detailed insight into how the sticky footer functions well, albeit with a hei ...

htmlcsssticky-footer

The drag functionality can only be used once when applied to two separate div elements

Recently, I came across an issue where I have both an Image and a custom text element placed between them using an input box. My goal is to make both the text and the image draggable on the page. However, I noticed that while the image can be dragged and d ...

javascriptjqueryhtmlcss

Modify the color of the active class in Bootstrap

I am trying to modify the color of the active class in my HTML code as I create a nav sidebar. Here is the snippet from my code: <div class="col-sm-2"> <ul class="nav nav-pills nav-stacked nav-static"> <!--stacked for vertic ...

htmlcsstwitter-bootstrapbackground-color

Eliminating Redundant CSS Code Using PHP Storm

After upgrading to PHP Storm version 8.03, I came across an article that discussed the ability to search for duplicate CSS code using this link: . Although I have tried to find a way to automatically resolve these duplicate codes within PHP Storm, I have ...

phpcssformattingphpstorm