Home > front end >  How to blend a color with an image and make it the background?
How to blend a color with an image and make it the background?

Time：09-17

I am trying to add a background gradient image and have a color blend with it as my background image. The way I'm currently attempting to do it is by adding the image and then having a background color under the body CSS and then 'mix-blend-mode: soft-light;' the image. It works for the first part of the screen but I want it to repeat as the background throughout the whole website. How would i do so? The background image i want to use is enter image description here

/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Lemon&family=Open Sans:wght@400;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: #38afff;
  --first-color-alt: hsl(204, 94%, 52%);
  --title-color: hsl(233, 32%, 15%);
  --text-color: hsl(233, 4%, 35%);
  --body-color: #daeef6;

  --first-hue: 250;
  --sat: 66%;
  --lig: 75%;
  --second-hue: 219;

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Open Sans', sans-serif;
  --second-font: 'Lemon', cursive;
  --biggest-font-size: 2.25rem;
  --normal-font-size: .938rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}


/* Page Loader */
#pageloader {
    background: #ede3f6 url(../img/SafeChoice.png) no-repeat center center;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 10000;
    background-size: 20%;
  
    
  }
  
img {
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none

}

/* Responsive typography */
@media screen and (min-width: 1224px) {
  :root {
    --biggest-font-size: 3.5rem;
    --normal-font-size: 1rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: #daeef6;
  color: var(--text-color);
  overflow-x: hidden;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1024px;
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}

.main {
  overflow: hidden; /* For the animations */
  z-index: 5;
}

/*=============== HOME ===============*/
.home,
.home__container{
  position: relative;
}

.home__container {
  padding-top: 8rem;
  height: 100vh;
  display: grid;
  row-gap: 1rem;
}

.home__title {
  font-size: var(--biggest-font-size);
  font-family: var(--second-font);
  color: var(--title-color);
  margin-bottom: .75rem;
}

.home__title span {
  display: block;
  color: var(--first-color);
}

.home__description, 
.home__button {
  font-weight: 600;
}

.home__description {
  color: var(--title-color);
  margin-bottom: 1.5rem;
}

.home__button {
  display: inline-block;
  background-color: var(--first-color);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 1.5rem .25rem;
  box-shadow: 0 8px 20px hsla(2, 100%, 45%, .28);
  transition: background .4s;
}

.home__button:hover {
  background-color: var(--first-color-alt);
}


.home__shape-small, 
.home__shape-big {
  background-color: hsl(283, 62%, 91%);
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}

.home__shape-small {
  width: 200px;
  height: 200px;
  top: -5rem;
  left: -5rem;
}

.home__shape-big {
  width: 250px;
  height: 250px;
  top: 17rem;
  right: -8rem;
}

.home__shape-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: soft-light;
}
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       
        <!--=============== REMIXICONS ===============-->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">

        <!--=============== BOXICONS ===============-->
        <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
        
        <!--=============== CSS ===============-->
        <link rel="stylesheet" href="assets/css/styles.css">
        <link rel="stylesheet" href="assets/css/scroll_nav.css">

        <title>Safe</title>

        <link rel="apple-touch-icon" href="assets/img/SafeChoice.png">
        

        <meta name="theme-color" content="hsl(196, 60%, 91%)">
        
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="yes">
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
    



    </head>
    <body>

        <div id="pageloader"></div>


        <!--==================== HEADER ====================-->
       

        <!--==================== MAIN ====================-->
        <main >

            <!--==================== HOME ====================-->
            <section >
               
                <img src="https://st.depositphotos.com/1244201/3732/i/950/depositphotos_37326627-stock-photo-grey-grainy-plaster-background.jpg" alt="" >

                <div >
                    <div >
                        <h1 >
                            Providing
                            <span>Safe</span>
                            Products 24/7
                        </h1>
                        <p >
                            Stay safe at all times.
                        </p>
                        <a href="#" >
                            Details
                        </a>
                    </div>
    
                    
                    
            </section>
<!--=============== End of Home ===============-->

<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>



        </main>


        <script>
    
            $(document).ready(function(){
                $('.customer-logos').slick({
                    slidesToShow: 6,
                    slidesToScroll: 1,
                    autoplay: true,
                    autoplaySpeed: 1000,
                    arrows: false,
                    dots: false,
                    pauseOnHover:false,
                    responsive: [{
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 4
                        }
                    }, {
                        breakpoint: 520,
                        settings: {
                            slidesToShow: 3
                        }
                    }]
                });
            });
        
            </script>
        

        <script>
            var loader = document.getElementById("pageloader");
          
            window.addEventListener("load", function(){
              loader.style.display = "none";
            })
          </script>


     

       

        
        <!--=============== MAIN JS ===============-->
        <script src="assets/js/main.js"></script>
        <script src="assets/js/scroll_nav.js"></script>
    </body>
</html>

CodePudding user response：

Switch the texture image to a <div> with the texture as the background-image (the background image will repeat down the whole page). Also, give the body position: relative

/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Lemon&family=Open Sans:wght@400;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: #38afff;
  --first-color-alt: hsl(204, 94%, 52%);
  --title-color: hsl(233, 32%, 15%);
  --text-color: hsl(233, 4%, 35%);
  --body-color: #daeef6;

  --first-hue: 250;
  --sat: 66%;
  --lig: 75%;
  --second-hue: 219;

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Open Sans', sans-serif;
  --second-font: 'Lemon', cursive;
  --biggest-font-size: 2.25rem;
  --normal-font-size: .938rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}


/* Page Loader */
#pageloader {
    background: #ede3f6 url(../img/SafeChoice.png) no-repeat center center;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 10000;
    background-size: 20%;
  
    
  }
  
img {
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none

}

/* Responsive typography */
@media screen and (min-width: 1224px) {
  :root {
    --biggest-font-size: 3.5rem;
    --normal-font-size: 1rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: #daeef6;
  color: var(--text-color);
  overflow-x: hidden;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1024px;
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}

.main {
  overflow: hidden; /* For the animations */
  z-index: 5;
}

/*=============== HOME ===============*/
.home,
.home__container{
  position: relative;
}

.home__container {
  padding-top: 8rem;
  height: 100vh;
  display: grid;
  row-gap: 1rem;
}

.home__title {
  font-size: var(--biggest-font-size);
  font-family: var(--second-font);
  color: var(--title-color);
  margin-bottom: .75rem;
}

.home__title span {
  display: block;
  color: var(--first-color);
}

.home__description, 
.home__button {
  font-weight: 600;
}

.home__description {
  color: var(--title-color);
  margin-bottom: 1.5rem;
}

.home__button {
  display: inline-block;
  background-color: var(--first-color);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: 1.5rem .25rem;
  box-shadow: 0 8px 20px hsla(2, 100%, 45%, .28);
  transition: background .4s;
}

.home__button:hover {
  background-color: var(--first-color-alt);
}


.home__shape-small, 
.home__shape-big {
  background-color: hsl(283, 62%, 91%);
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}

.home__shape-small {
  width: 200px;
  height: 200px;
  top: -5rem;
  left: -5rem;
}

.home__shape-big {
  width: 250px;
  height: 250px;
  top: 17rem;
  right: -8rem;
}

.home__shape-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: soft-light;
}

#page-background {
  background: url(https://st.depositphotos.com/1244201/3732/i/950/depositphotos_37326627-stock-photo-grey-grainy-plaster-background.jpg);
}
body {
  position: relative;
}
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       
        <!--=============== REMIXICONS ===============-->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">

        <!--=============== BOXICONS ===============-->
        <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
        
        <!--=============== CSS ===============-->
        <link rel="stylesheet" href="assets/css/styles.css">
        <link rel="stylesheet" href="assets/css/scroll_nav.css">

        <title>Safe</title>

        <link rel="apple-touch-icon" href="assets/img/SafeChoice.png">
        

        <meta name="theme-color" content="hsl(196, 60%, 91%)">
        
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="yes">
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
    



    </head>
    <body>
  <div id="page-background" ></div>
        <div id="pageloader"></div>


        <!--==================== HEADER ====================-->
       

        <!--==================== MAIN ====================-->
        <main >

            <!--==================== HOME ====================-->
            <section >

                <div >
                    <div >
                        <h1 >
                            Providing
                            <span>Safe</span>
                            Products 24/7
                        </h1>
                        <p >
                            Stay safe at all times.
                        </p>
                        <a href="#" >
                            Details
                        </a>
                    </div>
    
                    
                    
            </section>
<!--=============== End of Home ===============-->

<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>



        </main>


        <script>
    
            $(document).ready(function(){
                $('.customer-logos').slick({
                    slidesToShow: 6,
                    slidesToScroll: 1,
                    autoplay: true,
                    autoplaySpeed: 1000,
                    arrows: false,
                    dots: false,
                    pauseOnHover:false,
                    responsive: [{
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 4
                        }
                    }, {
                        breakpoint: 520,
                        settings: {
                            slidesToShow: 3
                        }
                    }]
                });
            });
        
            </script>
        

        <script>
            var loader = document.getElementById("pageloader");
          
            window.addEventListener("load", function(){
              loader.style.display = "none";
            })
          </script>


     

       

        
        <!--=============== MAIN JS ===============-->
        <script src="assets/js/main.js"></script>
        <script src="assets/js/scroll_nav.js"></script>
    </body>
</html>

Page link：https//www.codepudding.com/frontend/548006.html

Prev:'scons' not recognisable on command line
Next:Is there a pythonic way to control the flow depending on kwargs in a function?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding