locked
how to display the background image above a div RRS feed

All replies

  • User2103319870 posted

    I want the code graphic image above the div how to do this

    You can try with below implementation

    Updated HTML

    <div class="adv-signup">
       <div class="image"><img src="https://s6.postimg.cc/ugw1p1pcx/sprite.png"></div>
            <div class="contents">
                <div class="text">
                  <br/>
                    <h3>Sign up for E-News</h3>
                    <p>Leave your email and we’ll send you regular updates on programs, events and news.</p>
                </div>
    
                <div class="controls">
                    <input name="adv-sign-up-email-field" id="adv-sign-up-email-field" type="text" maxlength="255" value="Enter your email" />
                    <a href="#" class="btn"></a>
                </div>
            </div>
    <div>

    Updated CSS

    .adv-signup {;
      width: 1000px; height: 500px;}
    .contents {
      ; 
      background: blue; width: 800px; 
      height: 200px;top: 20px; 
      left: 30px; 
     }
    .image {
     float: left;
       ;
       left: 0px;
       top: 0px;
       z-index: 1000;
       padding: 5px;
    }
    Friday, August 17, 2018 2:17 AM
  • User569149469 posted

    Hi,

    I have done like this 

    https://codepen.io/aspnetgal/pen/GBbPwp 

    but there shud not be gap between divs

    Friday, August 17, 2018 3:13 AM
  • User2103319870 posted

    but there shud not be gap between divs

    add the below css to your page

     h3,h1{
        padding: 0px;
        margin: 0px !important;
    }

    updated Css

    .adv-signup {; 
       background-image: linear-gradient( #fff, #eff1f1);
       
      width: 1000px; height: 500px;top: 0px; left: 30px; }
    
    	
    .contents {;  width: 1000px; 
     height: 400px;
    
    margin:1px red;
     padding-top:0px;
    }
    .contents .bg{
     
      background: #ffffff url("https://s6.postimg.cc/ugw1p1pcx/sprite.png ") no-repeat left top;
       margin:0;
    }
    .text{
      
       font-family: "Ubuntu"; 
        font-weight: light;
        color:white;
      background-color:#2183c2;
         }
    
    .text h3{
     font-weight: bold;
     }
    .controls
    {
      
    }
    
     .btn
    {
      background: #0c5382;
    }
     h3,h1{
        padding: 0px;
        margin: 0px !important;
    }

    Friday, August 17, 2018 3:28 AM