I'm new on stackoverflow and I hope I'll describe my problem in a correct way. I want to add css styles to an element with use of setProperty method and I encountered some problems. It seems that only some of the properties are added and other not and I can't figure out why. In this case it renders only the 'background-size' property - when I ment that line of code it renders a simple div without any inline styles. I would appreciate your help on this. Thanks. This is my code:

    const Img = new Image();
    Img.src = "example.jpg";

    const div = document.createElement('div');
    console.log("Simple div: ", div); //<div style="background-size: cover;"></div> ???

    div.style.setProperty('width', 400);
    console.log("Adding width: ", div); //<div style="background-size: cover;"></div>

    div.style.setProperty('height', 300);
    console.log("Adding height", div); //the same as above

    div.style.setProperty('background-image', Img.src);
    console.log("Adding bg image:", div); //the same as above

    div.style.setProperty('background-size', 'cover');
    console.log(div); //<div style="background-size: cover;"></div>

    document.querySelector('body').appendChild(div);

I'm new on stackoverflow and I hope I'll describe my problem in a correct way. I want to add css styles to an element with use of setProperty method and I encountered some problems. It seems that only some of the properties are added and other not and I can't figure out why. In this case it renders only the 'background-size' property - when I ment that line of code it renders a simple div without any inline styles. I would appreciate your help on this. Thanks. This is my code:

    const Img = new Image();
    Img.src = "example.jpg";

    const div = document.createElement('div');
    console.log("Simple div: ", div); //<div style="background-size: cover;"></div> ???

    div.style.setProperty('width', 400);
    console.log("Adding width: ", div); //<div style="background-size: cover;"></div>

    div.style.setProperty('height', 300);
    console.log("Adding height", div); //the same as above

    div.style.setProperty('background-image', Img.src);
    console.log("Adding bg image:", div); //the same as above

    div.style.setProperty('background-size', 'cover');
    console.log(div); //<div style="background-size: cover;"></div>

    document.querySelector('body').appendChild(div);

• javascript

• Use the browser console (dev tools) (hit F12) and read any errors, including CSS errors. – Sebastian Simon Commented Mar 9, 2018 at 10:51

1 Answer 1

You were inserting invalid values inside your CSS rules :

You need to specify the unit of your value while setting an element's width or height. See this documentation.

.setProperty('width', 400);

Should be

.setProperty('width', '400px');

You need to specify that what you're passing as a background-image value is indeed an url with url( ... ). See this documentation

.setProperty('background-image', Img.src);

Should be

.setProperty('background-image', 'url(' + Img.src + ')');

const Img = new Image();
Img.src = "https://www.gravatar./avatar/c64594c112836c735bf0148a0557795a?s=32&d=identicon&r=PG&f=1";

const div = document.createElement('div');
console.log("Simple div: ", div);

div.style.setProperty('width', '400px');
console.log("Adding width: ", div);

div.style.setProperty('height', '300px');
console.log("Adding height", div)

div.style.setProperty('background-image', 'url(' + Img.src + ')');
console.log("Adding bg image:", div); 

div.style.setProperty('background-size', 'cover');
console.log(div);

document.querySelector('body').appendChild(div);