'how to add background image in behind slider?

I made a slider which when clicked will change the background. At the beginning of opening the page the background is white. How do I add a background image at the beginning of the page?

I want the first page to have a background image. If one of the features is clicked the background image will change: first page

after clicking the icon, the image that should have been replaced is not replaced, because I want the first time I open this page there is a background image and after clicking the icon the background image is replaced.

after click icon

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 625px;
}

* {
  box-sizing: border-box;
}

.slider {
  width: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}

.center .slick-center h3 {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
}

.center h3 {
  opacity: 0.8;
  transition: all 300ms ease;
}

.hidden {
  display: none;
}

.sg-feature img {
  width: 100px;
  height: 100px;
}

/* html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
 
}
body{
  background-image: url('images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 625px;
}
* {
  box-sizing: border-box;
}

.slider {
    width: 90%; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}


.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}


.center .slick-center h3 {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.08);
}
.center h3 {
  opacity: 0.8;
  transition: all 300ms ease;
}

  .hidden{
    display : none;
    }

    .hidden1{
      display : none;
      }
      .hidden2{
        display : none;
        }
        .hidden3{
          display : none;
          }
          .hidden4{
            display : none;
            }
            .hidden5{
              display : none;
              }
              .hidden6{
                display : none;
                }

               */

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/tes.css">
<link rel="stylesheet" type="text/css" href="slick-master/slick/slick.css">
<link rel="stylesheet" type="text/css" href="slick-master/slick/slick-theme.css">
<title>Title</title>
</head>
<body>
  <div>
  <img src="image/b1.jpg" style="z-index: -1;">
  <section class="background center slider variable-width variable-height ">
    <div class="text-center sg-feature" data-bg="image/b1.jpg">
      <img class="rounded mx-auto d-block" src="image/eat.png" />
      <h3>Eat and Come</h3>
      <br />
      <div class="sg-feature-desc hidden">
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
        <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="text-center sg-feature" data-bg="image/b2.jpg">
      <img class="rounded mx-auto d-block" src="image/grab.png" />
      <h3>Grab</h3>
      <br />
      <div class="hidden sg-feature-desc">
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
        <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="text-center sg-feature" data-bg="image/b3.jpg">
      <img class="rounded mx-auto d-block" src="image/experience.png" />
      <h3>Experience</h3>
      <br />
      <div class="hidden sg-feature-desc">
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
        <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="text-center sg-feature" data-bg="image/b4.jpg">
      <img class="rounded mx-auto d-block" src="image/Secret sale.png" />
      <h3>Secret Sale</h3>
      <br />
      <div class="hidden sg-feature-desc">
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
        <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="text-center sg-feature" data-bg="image/b5.jpg">
      <img class="rounded mx-auto d-block" src="image/sale.png" />
      <h3>Hashtag Sale</h3>
      <br />
      <div class="hidden sg-feature-desc">
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
        <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="text-center sg-feature" data-bg="image/b6.jpg">
      <img class="rounded mx-auto d-block" src="image/loyalty.png" />
      <h3>Loyalty</h3>
      <br />
      <div class="hidden sg-feature-desc">
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
        <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="text-center sg-feature" data-bg="image/b7.jpg">
      <img class="rounded mx-auto d-block" src="image/auction.png" />
      <h3>Auction</h3>
      <br />
      <div class="hidden sg-feature-desc">
        <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,</p>
        <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </section>

       

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="slick-master/slick/slick.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 6,
  speed: 300,
  focusOnSelect: true,
  variableWidth: true,
  variableHeight: true,
  adaptiveHeight: true,
  arrows: false,
  responsive: [{
    breakpoint: 768,
    settings: {
      arrows: false,
      centerMode: true,
      centerPadding: '40px',
      slidesToShow: 3
    }
  }, {
    breakpoint: 480,
    settings: {
      arrows: false,
      centerMode: true,
      centerPadding: '40px',
      slidesToShow: 1
    }
  }]
});

let $slidesDescriptions = $('.sg-feature-desc');
$(document).on('click', '.sg-feature', function() {
  $slidesDescriptions.addClass('hidden');
  
  let $slide = $(this);
  $slide.find('.sg-feature-desc').removeClass('hidden');  
  $('body').css('background-image', `url('${$slide.data('bg')}')`);
});
</script>
        
</body>
</html>
javascripthtmljquerycsstwitter-bootstrap


Solution 1:[1]

background-repeat: no-repeat; Might be the problem here, as the size of the selected image might be too small and so your replaceable background image is hiding it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rani Giterman

Related Questions