skip to Main Content

I have an image that I would like to overlay on top of a background gradient that I have set on a section element. Both the background gradient and image I am setting in CSS and calling via a class in HTML. Originally when just using the background gradient it worked fine, but after adding the image to place over the background gradient the background gradient disappeared?

.banner-gradient {
    background: radial-gradient(circle, #ba000b, #9e0008);
    color: white;
    z-index: 0;
    }

    .banner-overlay {
    background: url("../imagery/image.png");
    max-width: 100%; 
    height: auto;
    background-position: bottom;
    background-repeat: repeat-x;
    z-index: 1;
    }

    .section-align-center {
    text-align: center;
    }
 <section class="banner-gradient banner-overlay section-align-center">
        <div class="container">
            <p>image over background gradient</p>
        </div>
    </section>

3

Answers


  1. Chosen as BEST ANSWER

    I solved this with the help of this post. You must first place the banner-gradient in your outer div then in your inner div use banner-image.

    HTML

    <section class="banner-gradient section-align-center">
    <div class="container banner-overlay">
        <p>image over background gradient</p>
    </div>
    


  2. Try using background-image instead of background for image.

    .banner-gradient:before {
    	content: " ";
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
    }
    
    .banner-overlay {
    	background: url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') repeat;
    }
    
    .section-align-center {
        height: 400px;
        position: relative;
    }
    <section class="banner-gradient banner-overlay section-align-center">
        <div class="container">
            <p>image over background gradient</p>
        </div>
    </section>
    Login or Signup to reply.
  3. I would rather edit the class of the element you want the transparency in

    <div class="background">
      <div class="transbox">
        <p>This is some text that is placed in the transparent box.</p>
      </div>
    </div>
    
    
    div.background {
        background: url('https://www.w3schools.com/css/klematis.jpg') repeat;
        border: 2px solid black;
    }
    
    div.transbox {
        margin: 30px;
        background-color: #ffffff;
        border: 1px solid black;
        opacity: 0.6;
        filter: alpha(opacity=60); /* For IE8 and earlier */
    }
    
    div.transbox p {
        margin: 5%;
        font-weight: bold;
        color: #000000;
    }
    

    https://jsfiddle.net/mergatroid/xkmyqjec/1/

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search