Estoy creando una especie de menú de personalización, donde el usuario puede seleccionar imágenes de fondo y colores para algunos elementos de la página. Mi problema es específicamente con la etiqueta del body . El usuario puede aplicar tanto un color de fondo como una imagen de fondo transparente al body , pero el problema es que si el usuario selecciona una imagen, se elimina el color y la imagen de fondo.
Sé dónde está mi problema, pero no puedo encontrar una manera de solucionarlo.
entonces, cuando aplica primero el color, luego la imagen es lo que se muestra:
<body style="background: url("./image/STARS.png";) rgb(255, 165, 2);">pero si regresa y selecciona un color, el estilo cambia y la imagen se anula con el color seleccionado de esta manera:
<body style="background: rgb(255, 165, 2);"> ¿Cómo puedo hacer que cuando se seleccione la imagen, se aplique en la etiqueta "background-image="" en el estilo en lugar de en background=""
Aquí está mi JS para ambos: (el de abajo es el que aplica la imagen)
document.querySelectorAll('.theme-colors-menu .color').forEach(color => { color.onclick = () => { let background = color.style.background; document.querySelector('body').style.background = background; } }); document.querySelectorAll('.theme-colors-img-bgr .color').forEach(bgrImg => { bgrImg.onclick = () => { let background = bgrImg.style.backgroundImage; document.querySelector('body').style.backgroundImage = background; } }); También probé esto para la segunda función, pero aún se aplicó en la etiqueta de background en lugar de la de la background-image :
document.querySelectorAll('.theme-colors-img-bgr .color').forEach(bgrImg => { bgrImg.onclick = () => { let background = bgrImg.style.backgroundImage; $("body").css("background-image", background); } });¿Alguien puede decirme cuál es el problema que hace que esté en la etiqueta de fondo en lugar de en la imagen de fondo?
Lo hice funcionar, al final cambié la función superior a esto y resolvió mi problema:
document.querySelectorAll('.theme-colors-menu .color').forEach(color => { color.onclick = () => { let background = color.style.background; $("body").css("background-color", background); });El color se puede aplicar como propiedad de color de fondo .
<body style="background: url('./image/STARS.png'); background-color: rgb(255, 165, 2);">