Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

79
Vistas
¿Puedes encadenar backgroundImage y backgroundPosition?

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%'; };
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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%'; )};
about 4 years ago · Juan Pablo Isaza Denunciar

0

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:

  • color de fondo
  • imagen de fondo
  • repetición de fondo
  • archivo adjunto de fondo
  • posición de fondo

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>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda