使用img src作为背景图像

Question

I'm trying to use img src as background-image when media queries is in use.

My media queries is actived while max-width: 854px.

I'm trying it with jQuery but don't work.

My jQuery:

$(document).ready(function () {
        if ($(window).width() <= 854) {
            $('a.class').css('background-image', 'url(' + $('a.class img').attr(src) + ')');
        }
    });

What am I doing wrong?

Thank you!

Answer 1

Doing it with jQuery, you will probably want to do this :

$(document).ready(function () {
    if ($(window).width() <= 854) {
        $('a.class').each(function(){
            $(this).css('background-image', 'url(' + $(this).children('img').attr('src') + ')');
        });
    }
});

I used an each loop because I guess you could have multiple a.class and I use quotes for the src attribute.

Answer 2

Change

$('a.class').css('background-image', 'url(' + $('a.class img').attr(src) + ')');

to

$('a.class').css('background-image', 'url(' + $('a.class img').attr('src') + ')');

The .attr function expects a string. You needed to quote the value since src is the name of the attribute.

You probably would have caught this if you checked your browser's consoles for errors as Juan suggested. Or if you looked at the syntax highlighting in your IDE you'd notice that src was colored like variable name instead of a string value.

Answer 3

$('a.class').css('background-image', 'url(' + $('a.class img').attr("src") + ')');

"src" has to be between quotes.