The disappearing background of a div is causing a ripple effect on the other divs layered on top of the

Question

The disappearing background of a div is causing a ripple effect on the other divs layered on top of the

I'm facing an issue with my main div that has a background image filling the screen. While I've managed to make the image change constantly, the problem arises when the divs on top of the background div also fade out, making the whole page go blank. Is there a way to only fade out the background while keeping the rest of the content visible? Any advice on how to tackle this would be greatly appreciated!

html

<div id="hpbg-image">
   <div id="header">
      <div id="logo"><img src="images/logo.png"></div>
      <div id="login"><img src="images/login.png"></div>
      <div id="menu">

      </div>
   </div><!--Header End-->
    <div id="search-area">
        <div id="holder1">
             <img src="images/slogan.png"><br>
             <div id="searchbox">

             </div>
        </div>
     </div>
    </div>
    <div id="content1" style="height:150px">No minimum contract, pay for everything online</div>
        <div id="howitworks">
            <b>How it works</b>
        </div>
    <div id="freelancers" style="height:300px">

</div>

CSS

#hpbg-image {
    position: relative;
    height: 100%;
    width: 100%;
    background: url(images/image1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

#menu {
     padding-top:20px;
     padding-right:170px;
     position: absolute;
     right:0;
     color: #ffffff;
     font-family: 'Verdana',serif;
}

#login {
     padding-top:8px;
     padding-right:50px;
     position: absolute;
     right:0;
}

#holder1 {
    margin: 0;
    position: absolute;
    top: 40%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width:838px;
}

#searchbox {
    height:78px;
    width:458px;
    background: url(images/searchbg.png);
    background-repeat: no-repeat;
    padding-top: 22px;
    padding-bottom: 18px;
    padding-left:40px;
    text-align: center;
    margin: 0 auto;
}

jQuery

$(document).ready(function() {

    var images = [];
    images[0] = "images/image1.jpg";
    images[1] = "images/image2.jpg";
    images[2] = "images/image3.jpg";

    var i = 0;
    setInterval(fadeDivs, 2000);

    function fadeDivs() {
        //start with id = 0 after 5 seconds

        $('#hpbg-image').css("background-image", "url("+images[i]+")").fadeOut(500, function() {
            $(this).css("background-image", "url("+images[i]+")").fadeIn(500);
        });

        i++;

        if (i == 3) 
            i = 0; //repeat from start
    }
});

jquery html css

Answer 1

Answer №1

To ensure the content remains visible when hiding the background div, move it outside of the background div and use position:absolute to overlay the content on top of the background:

<div id="hpbg-image">
</div>
<div id="stuff">
    <div id="header">
      <div id="logo"><img src="images/logo.png"></div>
      <div id="login"><img src="images/login.png"></div>
      <div id="menu">

      </div>
    </div><!--Header End-->
    <div id="search-area">
        <div id="holder1">
             <img src="images/slogan.png"><br>
             <div id="searchbox">

             </div>
        </div>
     </div>
    </div>
    <div id="content1" style="height:150px">No minimum contract, pay for everything online</div>
        <div id="howitworks">
            <b>How it works</b>
        </div>
    <div id="freelancers" style="height:300px">
    </div>

</div>

To apply position:absolute, add the following CSS for both root divs:

#hpbg-image{ position:absolute; }
#stuff{ position:absolute; }

Answer 2

To ensure the content remains visible when hiding the background div, move it outside of the background div and use position:absolute to overlay the content on top of the background:

<div id="hpbg-image">
</div>
<div id="stuff">
    <div id="header">
      <div id="logo"><img src="images/logo.png"></div>
      <div id="login"><img src="images/login.png"></div>
      <div id="menu">

      </div>
    </div><!--Header End-->
    <div id="search-area">
        <div id="holder1">
             <img src="images/slogan.png"><br>
             <div id="searchbox">

             </div>
        </div>
     </div>
    </div>
    <div id="content1" style="height:150px">No minimum contract, pay for everything online</div>
        <div id="howitworks">
            <b>How it works</b>
        </div>
    <div id="freelancers" style="height:300px">
    </div>

</div>

To apply position:absolute, add the following CSS for both root divs:

#hpbg-image{ position:absolute; }
#stuff{ position:absolute; }

Answer 3

Answer №2

In my opinion, the answer to your question can be found in the response titled "CSS Background Opacity". Personally, I recommend utilizing the third solution that involves using CSS ':before' as it allows for images to be used as backgrounds, unlike some other responses.

Answer 4

In my opinion, the answer to your question can be found in the response titled "CSS Background Opacity". Personally, I recommend utilizing the third solution that involves using CSS ':before' as it allows for images to be used as backgrounds, unlike some other responses.

Answer 5

Answer №3

To achieve this effect, I recommend utilizing CSS3. Keep in mind that if the browser does not support CSS3, the desired result may not be achieved.

Include the following code in your CSS:

#hpbg-image {
  ...
  transition: background 1s linear; // Make sure to add this line to your CSS.
  ...
}

Add the following JavaScript function to control the fading of divs:

function fadeDivs() {
    // Start with id=0 after 5 seconds

    $('#hpbg-image').css("background-image", "url("+images[i]+")");
    i++;
    if (i==3) i=0; // Restart from the beginning
}

You can view the outcome here.

Answer 6

To achieve this effect, I recommend utilizing CSS3. Keep in mind that if the browser does not support CSS3, the desired result may not be achieved.

Include the following code in your CSS:

#hpbg-image {
  ...
  transition: background 1s linear; // Make sure to add this line to your CSS.
  ...
}

Add the following JavaScript function to control the fading of divs:

function fadeDivs() {
    // Start with id=0 after 5 seconds

    $('#hpbg-image').css("background-image", "url("+images[i]+")");
    i++;
    if (i==3) i=0; // Restart from the beginning
}

You can view the outcome here.

The disappearing background of a div is causing a ripple effect on the other divs layered on top of the

Answer №1

Answer №2

Answer №3

Similar questions

bespoke design picture holder

Extension for web design snippet

What strategies can be implemented to enhance accessibility for custom table behavior?

Unable to impose a restriction on the number input field limit

Using Jquery to create HTML elements from a C# function

Exploring the power of jQuery Ajax with JSON Data

Adding custom HTML platform views in the latest version of Flutter for web development is a breeze

Guidance on calling a JavaScript function from a dynamically added control

The problem with the first item title in the Jquery slider is causing

Tips for displaying a loader image with a centered message and preventing the bootstrap modal dialogue box from closing during an AJAX response from a PHP file

Sending a string via jQuery AJAX to an MVC controller results in a null parameter issue

Fade out the div element when clicked

Choose between using a function as a parameter or an instruction when making a selection based on change

What is the best method for properly inserting images into a Vue Carousel 3D slider?

How can I make CSS images appear beside specific links?

Transmit information to a different JavaScript framework using Vue

Increase the progress bar at regular intervals of x seconds

Unable to apply border radius to the div containing the video

Tips for creating a curved shape using fabric.js

Styling text on top of an image using CSS