如何添加子div背景图片并将其应用于整个父部分

Question

how to add child div background image and applied to entire parent section.Means i have section as parent class with child div.

 .section-bg{ padding-top:35px; background: transparent url('../../assets/images/bg-page-img1.png') repeat scroll 0px 0px ; background-attachment: fixed; } 

  <section class="bet-section inner-section " style=""> <div class="section-bg"></div> <div class="row"> <div class="col-md-5 col-md-offset-1 image-right-pad"> <img src="./assets/images/img-content/th-1.jpg"> </div> <div class="col-md-6 content"> <h2><span style="display:block">Our</span> <span style="font-size: 54px; font-weight: bold; padding-top: 60px; color: rgb(96, 31, 76);">Story</span></h2> <br> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore </p> </div> </div> </section> 

Answer 1

$(document).ready(function(){
    $(".section-bg").parent().css("background-image",
          + $(".section-bg").css("background-image"));

});

Answer 2

i don't understand why you want this ? you can write with CSS or inline CSS the background-image to the parent

also , in your CSS you set the background-attachment:scroll and then you overwrite it in the next line with background-attachment:fixed . that's not correct. choose one :)

my only guess is that you want to change the background-image of the parent depending on what background-image the child has. so you could do something like this

see snippet :

let me know if it helps .

 var bck = $(".section-bg").css("background-image") $(".bet-section").css("background-image", bck); 

 .section-bg{ padding-top:35px; background: transparent url('http://beerhold.it/579/300') no-repeat scroll 0px 0px ; } .bet-section { background-repeat:no-repeat; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="bet-section inner-section " style=""> <div class="section-bg"></div> <div class="row"> <div class="col-md-5 col-md-offset-1 image-right-pad"> <img src="./assets/images/img-content/th-1.jpg"> </div> <div class="col-md-6 content"> <h2><span style="display:block">Our</span> <span style="font-size: 54px; font-weight: bold; padding-top: 60px; color: rgb(96, 31, 76);">Story</span></h2> <br> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore </p> </div> </div> </section> 

or without JQ you could simply do this . this would be the logical way to do it.

 .bet-section { background: transparent url('http://beerhold.it/579/300') no-repeat scroll 0px 0px ;} .section-bg{ padding-top:35px; } 

 <section class="bet-section inner-section " style=""> <div class="section-bg"></div> <div class="row"> <div class="col-md-5 col-md-offset-1 image-right-pad"> <img src="./assets/images/img-content/th-1.jpg"> </div> <div class="col-md-6 content"> <h2><span style="display:block">Our</span> <span style="font-size: 54px; font-weight: bold; padding-top: 60px; color: rgb(96, 31, 76);">Story</span></h2> <br> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore </p> </div> </div> </section> 

or you could just write inline like this :

<section class="bet-section inner-section " style="background-image:url('image url')">