Agregar una imagen de fondo a un elemento <div>

170

¿Es posible hacer que un <div>elemento contenga una imagen de fondo, y si es así, ¿cómo lo haría?

html

— Sandeep
fuente

204

¿Te refieres a esto?

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

...

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

— phoibos
fuente

¿Puedo configurarlo como no repetible?

— Valentino Ru

12

sí: repetición de fondo: no repetición; w3schools.com/cssref/pr_background-repeat.asp

— Matt Becker

42

Puede hacerlo utilizando las backgroundpropiedades de CSS . Hay pocas formas 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 :

color es color en hexadecimal o uno de X11 Colors
camino es camino a la imagen
a otros les gusta la posición, el apego

background La propiedad CSS es una conexión de todas las propiedades de background-xxx en esa sintaxis:

background : background-color background-image background-repeat background-adjunto background-position ;

Fuente: w3schools

— Robik
fuente

Quiero usar el método HTML, pero es posible, solo usando ese método, agregar 2 imágenes que estén situadas de manera diferente. Sé que es posible hacer algo como: background-image: url ("image.jpg"), url ("image2"); pero al hacer esto, ambas imágenes estarán en el mismo lugar, un poco "superpuestas" entre sí, y quiero establecer diferentes posiciones para ellas.

— PaulP1

32

Sí :

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

— Destello
fuente

14

Use este estilo para obtener una imagen de fondo centrada sin repetir.

.bgImgCenter{
    background-image: url('imagePath');
    background-repeat: no-repeat;
    background-position: center; 
    position: relative;
}

En HTML, configure este estilo para su div:

<div class="bgImgCenter"></div>

— jegadeesh
fuente

10

Usar 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>

— Anand Thangappan
fuente

¿Seguramente el camino debe estar entre comillas simples?

— Shane G

7

Simplemente puede agregar un atributo img src con id:

<body>
<img id="backgroundimage" src="bgimage.jpg" border="0" alt="">
</body>

y en su archivo CSS (estirar el fondo):

#backgroundimage
{
   height: auto;
   left: 0;
   margin: 0;
   min-height: 100%;
   min-width: 674px;
   padding: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: -1;
}

— Adam Sandler
fuente

2

La pregunta es sobre agregar un elemento de fondo a un div, no agregar un atributo img separado, por lo que esto no proporciona una respuesta a la pregunta.

— Dipen Shah

3

Si bien esta solución no responde adecuadamente la pregunta, me dio una idea para otro problema que estaba enfrentando, así que le doy las gracias.

— Striker

6

<div class="foo">Foo Bar</div>

y en tu archivo CSS:

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

— Darin Dimitrov
fuente

2

<div id="imgg">Example to have Background Image</div>

Necesitamos agregar el siguiente contenido en la etiqueta Estilo:

.imgg(

   background-image: url('C:\Users\ajai\Desktop\10.jpg');

)

— Guvaliour
fuente

Su ruta local: C: \ Users \ ajai \ Desktop \ 10.jpg nunca va a funcionar en línea;)

— AlmostPitt

Solo por sacudida doy este camino

— Guvaliour

0

En su mayor parte, el método es el mismo que configurar todo el cuerpo

.divi{
    background-image: url('path');
}

</style>

<div class="divi"></div>

— Winston Brown
fuente