cambiar la imagen de fondo en el cuerpo

¿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?cambiar la imagen de fondo en el cuerpo

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; }

Fuente

2012-06-03 VeecoTech

Si tiene jQuery ya cargado, sólo se puede hacer esto:

$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');

EDITAR:

jQuery primera carga 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 llamar al Javascript para cambiar la imagen de fondo cuando sucede algo en la página, como cuando termina de cargar:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)'); 
    }); 
</script>

Fuente

2012-06-03 02:54:29 nathancahill

He intentado aplicar su código en el html, pero no hay cambios. – VeecoTech

Solo para señalar, la pregunta original pide una respuesta estrictamente javascript y esto utiliza jquery. La respuesta a continuación es la forma correcta de hacerlo de acuerdo con la pregunta real. No estoy seguro de por qué esto fue elegido como la mejor respuesta. – ChapmIndustries

La respuesta comienza con "Si ya tiene JQuery cargado ...", que muchos sitios web ya lo hacen. – nathancahill

Necesitará usar Javascript para esto. Puede establecer el estilo de background-image para el cuerpo como tal.

var body = document.getElementsByTagName('body')[0]; 
body.style.backgroundImage = 'url(http://localhost/background.png)';

sólo asegúrese de reemplazar la URL con el URL real.

Fuente

2012-06-03 02:46:29

Hola GRACIAS, pero no recibo ningún cambio del código a continuación. – VeecoTech

Debe colocarlo al final de la etiqueta del cuerpo o llamarlo cuando se carga el documento. –

Su solución funcionó para mí. ¡Gracias! – wowzuzz

acaba de establecer una función onload en el cuerpo:

<body onload="init()">

luego hacer algo como esto en javascript:

function init() { 
    var someimage = 'changableBackgroudImage'; 
    document.body.style.background = 'url(img/'+someimage+'.png) no-repeat center center' 
}

Puede cambiar el 'someimage' variable a lo que usted desee en función en algunas condiciones, como la hora del día o algo así, y esa imagen se establecerá como imagen de fondo.

Fuente

2012-06-03 04:47:43 jimjimmy1995

Si eres página tiene una imagen Open Graph, comúnmente utilizado para el intercambio social, puede utilizarla para configurar la imagen de fondo en tiempo de ejecución con vainilla JavaScript modo:

<script> 
    const meta = document.querySelector('[property="og:image"]'); 
    const body = document.querySelector("body"); 
    body.style.background = `url(${meta.content})`; 
</script>

los usos anteriores document.querySelector y Attribute Selectors a asignemeta la primera imagen de Open Graph que seleccione. Se realiza una tarea similar para obtener el body. Finalmente, cadena interpolación se utiliza para asignar body el el valor de la ruta a la imagen Open Graph.

Si desea que la imagen para cubrir todo el ventana y permanecer fijo establecido background-size así:

body.style.background = `url(${meta.content}) center center no-repeat fixed`; 
body.style.backgroundSize = 'cover';

Usando este enfoque se puede establecer un marcador de posición de imagen de fondo de baja calidad usando CSS y de intercambio con una imagen de alta fidelidad más tarde utilizando un evento de imagen onload, lo que reduce latencia percibida.

Fuente

2017-10-04 10:40:42

cambiar la imagen de fondo en el cuerpo

Respuesta

Cuestiones relacionadas