Start widgets below image after dynamic resize

  • I need to move the widgets down on the front page. I want them to start below the background image. I would like the spacing to be dynamic so that when the page is resized the widgets start at the bottom of the background image. I set the background color to dark teal to show the end of the image.

    Current CSS for the background image. It scales nicely on any device.

    
/* Homepage - add background image */
body.home.colors-dark, 
.home.colors-dark .site-content-contain, 
.home.colors-dark .navigation-top, 
.home.colors-dark .main-navigation ul {
        background-color: #002424 !important;
	background-image: url('/wp-content/themes/supinv/images/sibg.jpg'); 
    background-repeat: no-repeat;
background-size: 100%, auto !important;

}

/* Homepage - add translucent background to content */ 
.home .site-content {
    background: rgba(0, 0, 0, 0);
}

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I don’t think this can be achieved without painful pixel-pushing from how the image is implemented; as a background image on the <body> element. The main design features on the page are superimposed and the browser won’t understand to resize them in respect of one another. You need to instead structure the image and widgets so that, in the structure, the background image is first, with the page title on top of the image and then the widgets come after, i.e.:

    
<div class="example-image-class">
    <img alt="" src="/example-banner-image.png" />
    <h2> Example page title </h2>
</div>
<div class="example-widgets-class">
    <div class="example-widget"> ... </div>
    <div class="example-widget"> ... </div>
    <div class="example-widget"> ... </div>
</div>

    The <h2> can be absolutely positioned on top of the image. Then the browser will recognise the position of the image and position of the widgets, allowing both to scale without overlapping one another.

    If you go for the pixel-pushing technique, you’ll need to construct media queries every time the image touches the widgets, i.e.:
    (First remove your “!important rule” and avoid that at all costs)

    
body.home.colors-dark,
.home.colors-dark .site-content-contain {
    background-position: top;
}

@media screen and (max-width: 1100px) {

    body .elementor-10 .elementor-element.elementor-element-840d3f6 > .elementor-container {
        min-height: 150px;
    }
}

@media screen and (min-width: 1100px) and  (max-width: 1272px) {

    body .elementor-10 .elementor-element.elementor-element-840d3f6 > .elementor-container {
        min-height: 200px;
    }
}

@media screen and (min-width: 1400px) {

    body.home.colors-dark,
    .home.colors-dark .site-content-contain {
        background-size: 92% auto;
    }
}

@media screen and (min-width: 1570px) {

    body.home.colors-dark,
    .home.colors-dark .site-content-contain {
        background-size: 85% auto;
    }
}

@media screen and (min-width: 1720px) {

    body.home.colors-dark,
    .home.colors-dark .site-content-contain {
        background-size: 65% auto;
    }
}

    That’s the tip of the iceberg.

    • This reply was modified 6 years, 7 months ago by Andrew Nevins.
Viewing 1 replies (of 1 total)
  • The topic ‘Start widgets below image after dynamic resize’ is closed to new replies.