Tiene problemas para descubrir cómo usar backgroundImage y backgroundPosition con el método DOm. Buscando usar la imagen de fondo y ajustar el posicionamiento
window.onload = function() { var slime = "url(https://www.dropbox.com/s/scdx0a0ck16abtv/slime.jpg?raw=1)"; document.getElementsByTagName('main').style.backgroundImage = "url(https://www.dropbox.com/s/scdx0a0ck16abtv/slime.jpg?raw=1)"; slime.style.backgroundPosition = '25% 75%'; };Estoy dividiendo esto y agregando comentarios para mayor claridad (sin embargo, lo que @A Haworth dijo arriba es acertado).
window.onload = function() { // define and store image url with proper formatting var slime = "url('https://www.dropbox.com/s/scdx0a0ck16abtv/slime.jpg?raw=1')"; // get the main element from the DOM (there are multiple ways of accomplishing this) let main = document.querySelector('main'); // set background image of main element main.style.backgroundImage = slime; // set position of background image main.style.backgroundPosition = '25% 75%'; )};Las propiedades CSS de "encadenamiento" se denominan abreviaturas que se pueden aplicar a algunas propiedades CSS. Afortunadamente, la propiedad de backgound sí lo hace, aquí está la lista:
antecedentes:
Tiene que estar en ese orden delimitado con un espacio, y se puede omitir cualquier valor (pero se necesita al menos uno). Entonces OP sería:
background: url(https://www.dropbox.com/s/scdx0a0ck16abtv/slime.jpg?raw=1) 25% 75% /* You should add "no-repeat" betwwen -image and -position if the image dimensions are smaller than the element's dimension, unless you want a wallpaper effect */ Esa property: value se conoce como un conjunto de reglas CSS . Para aplicar realmente cualquier conjunto de reglas CSS a un elemento en línea con la propiedad .style , es usar el método .setProperty() junto con él.
node.style.setProperty(property, value); const main = document.querySelector('main'); const property = 'background'; const value = `url(https://www.dropbox.com/s/scdx0a0ck16abtv/slime.jpg?raw=1) 25% 75%`; main.style.setProperty(property, value); html, body { width: 100%; height: 100% } main { min-height: 100%; } <main></main>