html - repita - Agregar una imagen de fondo a un elemento<div>
div con imagen de fondo responsive (8)
¿Es posible hacer que un elemento <div> contenga una imagen de fondo, y si es así, cómo voy a hacer esto?
¿Te refieres a esto?
<style type="text/css">
.bgimg {
background-image: url(''../images/divbg.png'');
}
</style>
...
<div class="bgimg">
div with background
</div>
Puedes hacerlo usando las propiedades de background CSS. Hay pocas 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 malvado)
HTML: <div style="background: color url(''path'')"></div>
Donde :
- el color es el color en hexadecimal o uno de los colores X11
- camino es camino a la imagen
- otros como posición, apego
background CSS Property es una conexión de todas las propiedades background-xxx en esa sintaxis:
fondo : fondo-color fondo-imagen fondo-repetición fondo-accesorio fondo-posición ;
Fuentes: w3fools
Simplemente puede agregar un atributo img src con id:
<body>
<img id="backgroundimage" src="bgimage.jpg" border="0" alt="">
</body>
y en tu archivo CSS (expandir 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;
}
Usa 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>
Sí :
<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>
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, establece este estilo para tu div.
<div class="bgImgCenter"></div>
<div class="foo">Foo Bar</div>
y en tu archivo CSS:
.foo {
background-image: url("images/foo.png");
}
<div id="imgg">Example to have Background Image</div>
Necesitamos agregar el siguiente contenido en la etiqueta de estilo:
.imgg(
background-image: url(''C:/Users/ajai/Desktop/10.jpg'');
)