171 votos

Imagen de fondo de una <div> elemento

Puedo hacer una Imagen de fondo de una <div> elemento?? Por favor, dime cómo?

207voto

phoibos Puntos 672

Te refieres a esto?

<style type="text/css">
.bgimg {
    background-image: url(../images/divbg.png);
}
</style>

...

<div class="bgimg">
    div with background
</div>

42voto

Robik Puntos 3160

Usted puede hacer que el uso de CSS background propiedades. Hay algunas maneras de hacerlo:


Por ID

HTML: <div id="div-with-bg"></div>

CSS:

#div-with-bg
{
    background: color url('path') others;
}

Por Clase

HTML: <div class="div-with-bg"></div>

CSS:

.div-with-bg
{
    background: color url('path') others;
}

En HTML (que es malo)

HTML: <div style="background: color url('path')"></div>


Donde:

  • el color es el color en hexadecimal o uno de X11 Colores
  • ruta de acceso es la ruta de la imagen
  • otros, como la posición, la attachament

background Propiedad de CSS es una conexión de todos los antecedentes-xxx propiedades en que la sintaxis:

antecedentes: background-color imagen de fondo background-repeat background-attachment background-position;

Fuentes: w3fools

32voto

Andrew Puntos 4058

:

<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>

10voto

Anand Thangappan Puntos 1574

Uso como ..

<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>

6voto

Darin Dimitrov Puntos 528142
<div class="foo">Foo Bar</div>

y en el archivo CSS:

.foo {
    background-image: url("images/foo.png");
}

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X