Jquery Question posted in
The official Jquery Api Documentation can be found here.

Setting background image based off child img src using jQuery

I am having trouble setting the background image of specific elements based off their child img’s src.

I am unable to just set the background image in the source code – I’m attempting to modyify a set layout of a WordPress plugin.

Basic structure:

<li class="choice has-thumbnail">...</li>
<li class="choice has-thumbnail active"> 
    <button type="button" class="choice-item" style="">
        <span class="choice-text--container">       
            <i class="mkl-pc-thumbnail">
                <span>
                    <img src="https://www.src.website/image.png" alt="" style="display: none;">
                </span>
            </i>        
            <span class="text choice-name">Text</span>
        </span>     
    </button>
</li>
<li class="choice has-thumbnail">...</li>

My plan is to set the button’s background image as the src image from the child img.

My code so far doesn’t work for me:

$('li.has-thumbnail button').each(
    function(index, element){
        $(this).css('background-image', 'url(image/' & $('img',this).prop('src') & ')');
    }
);

What am I doing wrong?

Tags:

2

Answers


  1. 0

    Here is a script that will remove the content of the button too. Otherwise there is not much gained

    $('li.has-thumbnail button').each(
  function(index, element) {
    const imgSrc = $('img', this).prop('src');
    $(this).empty()
    $(this).css("background-image",`url(${imgSrc})`)
  }
);
    .choice-item { height:200px; width:200px }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<li class="choice has-thumbnail">...</li>
<li class="choice has-thumbnail active">
  <button type="button" class="choice-item" style="">
        <span class="choice-text--container">       
            <i class="mkl-pc-thumbnail">
                <span>
                    <img src="https://cdn.iconscout.com/icon/free/png-256/free-play-1912208-1617677.png" alt="" style="display: none;">
                </span>
            </i>        
            <span class="text choice-name">Text</span>
        </span>     
    </button>
</li>
    Login or Signup to reply.
  2. 0

    Use the .css() method direcly with a return value of the descendant IMG src:

    $(".has-thumbnail button").css("background-image", function() {
  return `url(${$("img", this).prop("src")})`;
});
    .has-thumbnail button { background-size: cover; }
    <ul>
  <li class="choice has-thumbnail active">
    <button type="button" class="choice-item">
        <span class="choice-text--container">       
            <i class="mkl-pc-thumbnail"><span><img src="https://picsum.photos/id/237/100/20" alt="" style="display: none;"></span></i>        
            <span class="text choice-name">Text</span>
        </span>     
    </button>
  </li>
  <li class="choice has-thumbnail active">
    <button type="button" class="choice-item">
        <span class="choice-text--container">       
            <i class="mkl-pc-thumbnail"><span><img src="https://picsum.photos/id/230/200/20" alt="" style="display: none;"></span></i>        
            <span class="text choice-name">Some other Text</span>
        </span>     
    </button>
  </li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search