javascript - repita - cambiar la imagen de fondo en el cuerpo
imagen de fondo html css (4)
Necesitarías usar Javascript para esto. Puede configurar el estilo de la background-image de background-image para el cuerpo como tal.
var body = document.getElementsByTagName(''body'')[0];
body.style.backgroundImage = ''url(http://localhost/background.png)'';
Solo asegúrate de reemplazar la URL con la URL real .
¿Cómo cambio la imagen de fondo en CSS en tiempo de ejecución? Tengo la siguiente imagen de fondo en el cuerpo y ¿se puede cambiar la imagen en el tiempo de ejecución?
body {
height: 100%;
background: #fff8db url(../images/backgrounds/header-top.jpg) no-repeat center top;
/*background-color: #fff8db;*/
/*background-size: 1650px 900px;*/
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
color:#404040;
line-height:20px; }
Si su página tiene una imagen de gráfico abierto , comúnmente utilizada para compartir en redes sociales, puede usarla para establecer la imagen de fondo en tiempo de ejecución con JavaScript de vainilla así:
<script>
const meta = document.querySelector(''[property="og:image"]'');
const body = document.querySelector("body");
body.style.background = `url(${meta.content})`;
</script>
Lo anterior utiliza document.querySelector y los selectores de atributos para asignar a la primera imagen de gráfico abierto que selecciona. Una tarea similar se realiza para obtener el body . Finalmente, la interpolación de cadenas se utiliza para asignar a body the background.style el valor de la ruta a la imagen de Open Graph.
Si desea que la imagen cubra toda la ventana gráfica y se mantenga fija, establezca background-size como:
body.style.background = `url(${meta.content}) center center no-repeat fixed`;
body.style.backgroundSize = ''cover'';
Usando este enfoque, puede establecer un marcador de posición de imagen de fondo de baja calidad utilizando CSS e intercambiar con una imagen de alta fidelidad más adelante utilizando un evento de onload imagen, reduciendo así la latencia percibida .
Si ya tienes JQuery cargado, puedes hacer esto:
$(''body'').css(''background-image'', ''url(../images/backgrounds/header-top.jpg)'');
EDITAR :
Primero carga JQuery en la etiqueta de la cabeza:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Luego llame a Javascript para cambiar la imagen de fondo cuando algo sucede en la página, como cuando termina de cargarse:
<script type="text/javascript">
$(document).ready(function() {
$(''body'').css(''background-image'', ''url(../images/backgrounds/header-top.jpg)'');
});
</script>
Solo establece una función onload en el cuerpo:
<body onload="init()">
Entonces haz algo como esto en javascript:
function init() {
var someimage = ''changableBackgroudImage'';
document.body.style.background = ''url(img/''+someimage+''.png) no-repeat center center''
}
Puede cambiar la variable ''someimage'' a lo que desee dependiendo de algunas condiciones, como la hora del día o algo así, y esa imagen se establecerá como imagen de fondo.