¿Cómo tener una imagen dinámica como fondo de CSS?

Tengo un div logotipo que yo quiero usar mi imagen del logotipo como fondo para, por ejemplo:¿Cómo tener una imagen dinámica como fondo de CSS?

.logo { 
    background: #FFF url(images/logo.jpg); 
}

Sin embargo, en una página de configuración en mi guión, me gustaría tener un campo de entrada de texto para especifique cuál es la URL de la imagen para la imagen de fondo.

¿Cómo puedo configurar la imagen de fondo que para este div como la dirección URL de imagen introducida sin tener que hacer:

<div><img src="/images/logo.jpg" /></div>

(El guión está escrito en PHP)

Fuente

2012-07-03 JROB

¿Tiene que ser persistente? ¿Se puede hacer con javascript/jquery o tiene que hacerse con php? – chrisgooley

Preferiría no usar javascript – JROB

Esto es muy simple. Todo lo que necesita hacer es o bien poner esto en el <head>:

<style type="text/css"> 
.logo { 
background: #FFF url(<?php echo $variable_holding_img_url; ?>); 
} 
</style>

o simplemente puede utilizar la línea style atributo y definir la propiedad background-image CSS como otras respuestas han sugerido:

<div style="background-image: url(<?php echo $varable_holding_img_url; ?>);"> 
</div>

Ahora, Antes de permitir que se envíe, asegúrese de que no contiene HTML ni nada, solo caracteres de URL válidos. Y también se debe escapar de ella por lo que alguien no puede entrar en esto en la entrada URL:

"> <script src="http://example.com/xss-attack.js"></script> <!--

y levantar el página.

Imagino que está poniendo esta url de imagen en una base de datos, así que recuerde siempre lo que sucedió con los registros escolares Bobby Tables (escapéese de la entrada).

Fuente

2012-07-03 03:41:04 Nathan

¿Pero no es mejor usar archivos CSS para la caché y la velocidad del sitio? Pensé que los estilos en línea eran malos. –

@JordanCarter Sí, los archivos CSS son los mejores para el almacenamiento en caché y la velocidad del sitio. Pero es probable que realmente no desee almacenar esta parte en caché, ya que la URL de fondo es una variable y, por lo tanto, puede/cambiará. En este caso, creo que los estilos integrados están bien, siempre que toda la hoja de estilos no esté incrustada en la página web. – Nathan

Creo que se puede establecer el fondo imagen dinámicamente usando javascript como se da here.

Si prefiere no utilizar javascript, por qué no puedes usar en línea style atributo.
ex

<div style="background-image: url(xyz)"></div>

Fuente

2012-07-03 03:02:26

O se necesita para generar el CSS desde un script PHP (un poco más avanzados) o utilizar los estilos en línea para hacer el truco. Ej:

<div style="background-image: <?php echo $_POST['whateverjpg']; ?>" > 
//blah 
</div>

Esto es muy insegura, pero la respuesta más concisa que puede dar ..

Fuente

2012-07-03 03:06:25

¿Cómo es esto "increíblemente inseguro"? Solo me preguntaba ... – Nathan

PHP injection. Solo escapa tus datos. –

Oh, sí ... cualquiera que no escapa a sus datos ingresados por el usuario (y las entradas de la base de datos, que es más probable en lo que se almacenará la URL de esta imagen) debería informarse sobre [Bobby Tables] (http://bobby-tables.com/). – Nathan

<input type="text" class="inputContent" /> 
<script type="text/javascript"> 
    var inputC = $('input.inputContent').val(); 
    $('body').css('background', 'url(' + inputC + ')'); 
</script>

Eso es totalmente js y jQuery, porque no sé PHP, pero es una solución!

Fuente

2012-07-03 03:39:19 Chad

¿Cómo tener una imagen dinámica como fondo de CSS?

Respuesta

Cuestiones relacionadas