Position the image between two div containers in the center of the screen, ensuring it is responsive and does not overlap with any text

Question

Position the image between two div containers in the center of the screen, ensuring it is responsive and does not overlap with any text

I've been working on trying to position an image between two divs on my webpage. So far, I've managed to place the image there but it's not responsive (only displays correctly at a width of 1920) and ends up overlapping the text in both divs:

Check out this screenshot from my website

Here is the CSS I'm using:

.btwimg {
    width: 90%;
    height: auto;
    position: absolute;
    transform: translate3d(-20%, -50%, 0);
    z-index: 1;
    left: 50%;
    background: url("../img/lara2.png");
    background-repeat: no-repeat;
    box-shadow: 0 5px 7px rgba(0,0,0,0.1);
}

and here is the HTML code:

<div class="btwimg">
    <img src="img/lara2.png">
</div>

If you want to see the desired outcome, take a look at this reference image.

Do you think it's possible to achieve what I have in mind? Any help would be greatly appreciated.

html css responsive-design

Answer 1

Answer №1

To create enough space for your image, you need to add the same amount of padding-bottom to the upper DIV and padding-top to the subsequent DIV. It may take some trial and error to find the right amount.

Your child element, btwing DIV, should be within the subsequent DIV for this CSS to work effectively:

.btwimg {
  width: 90%;
  height: 250px; /* A fixed height is necessary */
  position: absolute;
  z-index: 1;
  left: 50%;
  top: -50%;
  transform: translate(-50%, -50%);
  background: url("../img/lara2.png");
  background-repeat: no-repeat;
  box-shadow: 0 5px 7px rgba(0,0,0,0.1);
}

Ideally, the height setting should be a calculated value based on the original width/height proportion and the set 90% width. For instance, if the proportion is 16/9, it could be written as height: calc(9/16 * 90%);

Answer 2

To create enough space for your image, you need to add the same amount of padding-bottom to the upper DIV and padding-top to the subsequent DIV. It may take some trial and error to find the right amount.

Your child element, btwing DIV, should be within the subsequent DIV for this CSS to work effectively:

.btwimg {
  width: 90%;
  height: 250px; /* A fixed height is necessary */
  position: absolute;
  z-index: 1;
  left: 50%;
  top: -50%;
  transform: translate(-50%, -50%);
  background: url("../img/lara2.png");
  background-repeat: no-repeat;
  box-shadow: 0 5px 7px rgba(0,0,0,0.1);
}

Ideally, the height setting should be a calculated value based on the original width/height proportion and the set 90% width. For instance, if the proportion is 16/9, it could be written as height: calc(9/16 * 90%);

Answer 3

Answer №2

I followed @Johannes' solution and made some adjustments to achieve the desired outcome:

.btwimg {
max-width: 800px;
min-width: 300px;
height: 16vw;
position: absolute;
z-index: 1;
left: 50%;
top: calc(2vw - 38px); /* ensures div stays centered across different screen sizes */
transform: translate(-50%, -50%);
}

Instead of using a background, I opted for an image to simplify the resizing process.

.btwimg img {
height: auto;
width: 100%;
}

The btwimg class was placed as a child of the second div as per the recommendation.

View the result on mobile devices

View the result on desktop screens

Answer 4

I followed @Johannes' solution and made some adjustments to achieve the desired outcome:

.btwimg {
max-width: 800px;
min-width: 300px;
height: 16vw;
position: absolute;
z-index: 1;
left: 50%;
top: calc(2vw - 38px); /* ensures div stays centered across different screen sizes */
transform: translate(-50%, -50%);
}

Instead of using a background, I opted for an image to simplify the resizing process.

.btwimg img {
height: auto;
width: 100%;
}

The btwimg class was placed as a child of the second div as per the recommendation.

View the result on mobile devices

View the result on desktop screens

Position the image between two div containers in the center of the screen, ensuring it is responsive and does not overlap with any text

Answer №1

Answer №2

Similar questions

Creating circular patterns with looping on a canvas

Hover effect for Bootstrap cards

Is it possible that images appear normal locally, but become stretched once deployed? (CSS/HTML only)

404 error occurs when Spring-Boot fails to include CSS file through ResourceLocations

Implementing a click function that toggles between adding and removing a class, keeping track of the number of clicks, and utilizing localStorage to prevent repeated clicking in the

Is it possible to display multiple slideshows in separate tabs on a single page simultaneously?

What is the best method to display each HTML output on a separate line using Python?

Instructions on how to navigate to a class page by clicking a button in a ReactJS interface

Is it possible to align the second "navbar" div inline with the first "navbar" div?

Improper Alignment of Bootstrap 4 Navbar Link: Troubleshooting Required

Concealing objects identified by a specific id

Navigating and Organizing in Ionic Service Factory

What is the process for aligning Item1 to the left and Item2 & Item3 to the right using MUI React?

Using V-for to iterate over a multi-dimensional array

Align content vertically within a div container

The clingy navigation bar hinders smooth scrolling to the content

Having a problem with the hover effect on the navbar component

CSS3 Animation for Marquee Image

JavaScript Popup Box Failing to Trigger

Applying custom CSS designs to images using Thymeleaf