CODEWITHSUNDEEP
jquerycss
user2089987
user2089987

Reputation: 1051

How to load an image inside a div specified in jquery

Transparent image

I need to add the below attached transparent image in each dynamic generated div mentioned in the fiddle http://jsfiddle.net/ramapriya/xeYnv/5/

for (var i = 0; i < columns; i++) {
    var $col = $("<div />", {
        class: "col",
        style: "background: " + get_random_color() + ";",
        id : ii + "-" + i
    });
    $row.append($col);
}

Upvotes: 2

Views: 122

Answers (2)

Jai
Jai

Reputation: 74738

You can try this way at this line:

change this line:

style: "background: " + get_random_color() + ";",

with this:

style: "background: url('https://i.sstatic.net/OBZ7q.png') 0 0 no-repeat;",

where https://i.sstatic.net/OBZ7q.png is the path of the image.

Demo Fiddle

Edit:

You can put with random colors this way:

style: "background: url('https://i.sstatic.net/OBZ7q.png') 0 0 no-repeat" + 
                    get_random_color() + ";",

Updated Fiddle with random colors and background image

Upvotes: 1

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can try using the background shorthand to set color and background image.

Code:

for (var i = 0; i < columns; i++) {
    var $col = $("<div />", {
        class: "col",
        style: "background: " + get_random_color() + " url('https://i.sstatic.net/OBZ7q.png');",
        id : ii + "-" + i
    });
    $row.append($col);
}

Demo: http://jsfiddle.net/xeYnv/7/

Upvotes: 0

Related Questions