CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Fernandez
Fernandez

Reputation: 61

set images url to background attribute using concatenation

What's wrong with my concatenation below?

$(function(){

    var bg = "http://i.imgur.com/kqRNO6M.jpg";
    var html = '<div style="background:linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),url(\"'+ bg +'\") no-repeat;">';
});

my demo is here http://jsfiddle.net/su3fpkex/

I escaped double quote with \ but couldn't seem working.

Upvotes: 0

Views: 694

Answers (4)

Gilson PJ
Gilson PJ

Reputation: 3580

You forgot to put the html content in the page:

$(function(){

    var bg = "http://i.imgur.com/kqRNO6M.jpg";
    var html = '<div style="background:linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),url(\''+ bg +'\') no-repeat;">';
    $('body').append(html);
});

Upvotes: 1

Dileep
Dileep

Reputation: 515

If you set background image you have to set width and height for div.

<div class='img'></div>

$(function(){
   var bg = "http://i.imgur.com/kqRNO6M.jpg";
   var html = '<div style="width:300px;height:300px;background-size:cover;background:linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),url(\''+ bg +'\') no-repeat;">';
    $('.img').html(html);

});

Upvotes: 0

rvandoni
rvandoni

Reputation: 3397

try with this:

$(function(){

  var bg = "http://i.imgur.com/kqRNO6M.jpg";
  var html = '<div style=\'background:linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),url("'+ bg +'") no-repeat;\'>';

});

and remember to append somewhere your html variable! :)

Upvotes: 2

dam660
dam660

Reputation: 79

Try this

$(function(){

    var bg = "http://i.imgur.com/kqRNO6M.jpg";
    var html = '<div style="background:linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),url(\''+ bg +'\') no-repeat;">';

    alert(html);
});

Upvotes: 0

Related Questions