A single background image divided among two separate divs

Question

A single background image divided among two separate divs

Seeking help once again after encountering difficulties the first time. Any feedback is greatly appreciated.

I am currently working on a website that includes 2 divs with background images, but I'm struggling to make them align perfectly across all devices.

Currently, the background images align correctly on screens up to 1920px wide, but as the screen size increases, they start to shift out of alignment.

If anyone could assist me with this issue, I would be very grateful.

Please refer to the image here for reference.

.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg") no-repeat center;
min-height: 895px;
background-size: auto 100%, cover;
}

.mc-key-points {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg") no-repeat center;
min-height: 895px;
background-size: auto 100%, cover;
}

@media only screen and (min-width: 1921px) {
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image.jpg") no-repeat center center;
min-height: 895px;
background-size: cover;
}

.mc-key-points {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-key-points-image.jpg") no-repeat center center;
min-height: 895px;
background-size: cover;
}
}

@media only screen and (max-width: 1200px) {
.productTopSection {
background: url("http://mcauliffe.testcre8.co.uk/assets/images/home/mcauliffe-brownfield-experts-homepage-about-image-mobile.jpg") no-repeat center center;
background-size: cover;
}

.mc-key-points {
background: none;
}
}

<div class="productTopSection g-py-200">
<!-- Content Goes Here -->
</div>

<div class="mc-key-points g-py-200">
<!-- Content Goes Here -->
</div>

html css bootstrap-4 background-image

Answer 1

Answer №1

@media only screen and (max-width: 767px)
.productTopSection {
    background-size: cover;
    height: 200px;
    min-height: auto;
}

It appears that the above code is correct based on the fact that there is no content present. Please let me know if my assumption is incorrect.

Answer 2

@media only screen and (max-width: 767px)
.productTopSection {
    background-size: cover;
    height: 200px;
    min-height: auto;
}

It appears that the above code is correct based on the fact that there is no content present. Please let me know if my assumption is incorrect.

Answer 3

Answer №2

Your provided example is not functioning properly, but fear not, I will make an effort to comprehend your message

Initially, one must grasp the concept of how it operates

https://i.sstatic.net/Vsz2e.jpg

The blue frame represents your div in full-screen mode (acting as a single element for the entire page). Since the div lacks height, one can assign it a min-height or fixed height (using the height property), which functions similarly when solely featuring a background until content is inserted within the div.

It is essential to note that the specified height does not impact the image's inherent height itself; therefore, the min-height will remain unchanged until sufficient text is added within it (for instance, any content with a given height).

In the demonstration image, the background-size property was exemplified with a value of 100% auto. Referencing the documentation, we observe that 100% width is set while leaving the height as auto by default with equivalent background-image positioning (background-position: 0% 0%).

If articulated in this manner:

background-size: 100% auto;
background-position: 0 0; // although unnecessary since this is the default setting and used here merely as an example

the outcome mirrors the depiction above, wherein the image is stretched widthwise relative to the screen's proportions.

Upon reducing the screen's width, the div modifies its width accordingly, conforming to the screen's dimensions automatically. https://i.sstatic.net/8NUgE.png

What transpires? A vacant region beneath! In your scenario, the height was denoted as 100%, adjusting the width automatically.

background-size: auto 100%;

Furthermore, refrain from utilizing multiple background image syntax in such cases:

background-size: auto 100%, cover; // singular background image employed in this context

This mirrors the non-functional output you encountered:

https://i.sstatic.net/GTcyh.jpg

Note: It appears that center positioning is utilized, leading to dual gaps! A commendable achievement!

What remedy is suggested? Embrace an image (via the HTML img tag) instead of a background.

For instance:

<img aria-hidden="true" class="bg-fix" src="https://i.picsum.photos/id/767/1200/800.jpg?hmac=lGBpi_Bt_UPPi17TX-TUBQitEe14QlbeSJ-GYhwZBvw" alt="">
<style>
    img {
        display: block; // Eliminate native inline spacing
        width: 100%;
    }
</style>

Alternatively, implement media queries to regulate the div's height (utilizing vh over pixels or CSS-based responsive designs)

<style>
    div {
        /*.....*/
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
        min-height: 60vh;
    }

    /* OR */

    div {
        /*....*/
        min-height: 875px;
    }
    @media screen and (max-width: 1024px) {
        div {
            min-height: 500px; 
        }
    }
</style>

Answer 4

Your provided example is not functioning properly, but fear not, I will make an effort to comprehend your message

Initially, one must grasp the concept of how it operates

https://i.sstatic.net/Vsz2e.jpg

The blue frame represents your div in full-screen mode (acting as a single element for the entire page). Since the div lacks height, one can assign it a min-height or fixed height (using the height property), which functions similarly when solely featuring a background until content is inserted within the div.

It is essential to note that the specified height does not impact the image's inherent height itself; therefore, the min-height will remain unchanged until sufficient text is added within it (for instance, any content with a given height).

In the demonstration image, the background-size property was exemplified with a value of 100% auto. Referencing the documentation, we observe that 100% width is set while leaving the height as auto by default with equivalent background-image positioning (background-position: 0% 0%).

If articulated in this manner:

background-size: 100% auto;
background-position: 0 0; // although unnecessary since this is the default setting and used here merely as an example

the outcome mirrors the depiction above, wherein the image is stretched widthwise relative to the screen's proportions.

Upon reducing the screen's width, the div modifies its width accordingly, conforming to the screen's dimensions automatically. https://i.sstatic.net/8NUgE.png

What transpires? A vacant region beneath! In your scenario, the height was denoted as 100%, adjusting the width automatically.

background-size: auto 100%;

Furthermore, refrain from utilizing multiple background image syntax in such cases:

background-size: auto 100%, cover; // singular background image employed in this context

This mirrors the non-functional output you encountered:

https://i.sstatic.net/GTcyh.jpg

Note: It appears that center positioning is utilized, leading to dual gaps! A commendable achievement!

What remedy is suggested? Embrace an image (via the HTML img tag) instead of a background.

For instance:

<img aria-hidden="true" class="bg-fix" src="https://i.picsum.photos/id/767/1200/800.jpg?hmac=lGBpi_Bt_UPPi17TX-TUBQitEe14QlbeSJ-GYhwZBvw" alt="">
<style>
    img {
        display: block; // Eliminate native inline spacing
        width: 100%;
    }
</style>

Alternatively, implement media queries to regulate the div's height (utilizing vh over pixels or CSS-based responsive designs)

<style>
    div {
        /*.....*/
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
        min-height: 60vh;
    }

    /* OR */

    div {
        /*....*/
        min-height: 875px;
    }
    @media screen and (max-width: 1024px) {
        div {
            min-height: 500px; 
        }
    }
</style>

Answer 5

Answer №3

It's uncertain if you intended to crop the image sides on mobile, but using an <img> tag in HTML instead of background-image in CSS can simplify things.

The challenge lies in maintaining the aspect ratio when scaling the height with the width. In your code, the height is effectively set to 895px with min-height, causing cropping unless more content is added to the div.

On mobile screens, the height remains at 895px, resulting in gradually less cropped image sides until reaching 1920px in width. Beyond this width, the image stretches wider, leading to top and bottom cropping. This misalignment is caused by centering the images based on percentage values, which may not align as expected.

Using the <img> tag simplifies this process. By adding content width/height to the container, it allows for expansion or shrinking to fit the content. Setting both the container and img width to 100% ensures they fill up the space while preserving the aspect ratio, eliminating top/bottom cropping and ensuring aligned edges.

An absolute positioned container over the img can then be used for text content placement. For cropping image sizes on smaller screens, consider implementing media queries for breakpoints and adjustments.

Here's a simplified example using <img> for better control and straightforward implementation:

.productTopSection, .mc-key-points {
  position: relative;
  width: 100%;
}

.responsive-img {
  width: 100%;
}

.overlay-content {
  position: absolute;

  /* initial content positioning */
  top: 50%;
  transform: translateY(-50%);
}

<div class="productTopSection g-py-200">
  <img class="responsive-img" src="http://example.com/image1.jpg">
  <div class="overlay-content">
    Content Goes Here!
  </div>
</div>


<div class="mc-key-points g-py-200">
  <img class="responsive-img" src="http://example.com/image2.jpg">
  <div class="overlay-content">
    Content Goes Here!
  </div>
</div>

Answer 6

It's uncertain if you intended to crop the image sides on mobile, but using an <img> tag in HTML instead of background-image in CSS can simplify things.

The challenge lies in maintaining the aspect ratio when scaling the height with the width. In your code, the height is effectively set to 895px with min-height, causing cropping unless more content is added to the div.

On mobile screens, the height remains at 895px, resulting in gradually less cropped image sides until reaching 1920px in width. Beyond this width, the image stretches wider, leading to top and bottom cropping. This misalignment is caused by centering the images based on percentage values, which may not align as expected.

Using the <img> tag simplifies this process. By adding content width/height to the container, it allows for expansion or shrinking to fit the content. Setting both the container and img width to 100% ensures they fill up the space while preserving the aspect ratio, eliminating top/bottom cropping and ensuring aligned edges.

An absolute positioned container over the img can then be used for text content placement. For cropping image sizes on smaller screens, consider implementing media queries for breakpoints and adjustments.

Here's a simplified example using <img> for better control and straightforward implementation:

.productTopSection, .mc-key-points {
  position: relative;
  width: 100%;
}

.responsive-img {
  width: 100%;
}

.overlay-content {
  position: absolute;

  /* initial content positioning */
  top: 50%;
  transform: translateY(-50%);
}

<div class="productTopSection g-py-200">
  <img class="responsive-img" src="http://example.com/image1.jpg">
  <div class="overlay-content">
    Content Goes Here!
  </div>
</div>


<div class="mc-key-points g-py-200">
  <img class="responsive-img" src="http://example.com/image2.jpg">
  <div class="overlay-content">
    Content Goes Here!
  </div>
</div>

A single background image divided among two separate divs

Answer №1

Answer №2

Answer №3

Similar questions

Passing a variable between two PHP files and then showcasing its value in a separate third file

JavaScript: Finding the full Base-URL - A Step-by-Step Guide

Launch a nearby hyperlink in a separate tab

Embedding PHP code within HTML causing functionality issues

The Material UI button shifts to a different row

Is it possible to edit the HTML DOM of an external URL that is opened using window.open?

Can the tooltip of an element be changed while the old tooltip is still visible without having to move the mouse away and then back again?

Comparing Traditional Tables to Div Tables

I need help with importing CSS in Vue.js

How to determine if an Angular list has finished rendering

Unable to set height:auto for the background image

JavaScript for validating dimension text input has unique functionalities

Is it possible to assign a specific value to a row within a table?

Come see the media Rule on display (viewable on a mobile phone)!

What is the best way to conceal a broken image icon without sacrificing all of the stylesheet?

The tab key seems to be malfunctioning when triggered during a jquery change event

Angular, a Self-sufficient Module of Cascading Style Sheets

Solving the challenge of HTML checkbox design

Creating custom styles using Material-UI's makeStyles function with both before and after

Adjust text size within a div when hovering over it