Html/Css: cómo hacer que una imagen se estire al 100% del ancho de un contenedor y luego mostrar otra imagen sobre él?

Estoy luchando para obtener el diseño del encabezado que tengo en mente.Html/Css: cómo hacer que una imagen se estire al 100% del ancho de un contenedor y luego mostrar otra imagen sobre él?

Aquí es el html hasta ahora:

<div id="header"> 
    <img src="/img/headerBg.jpg" alt="" class="headerBg" /> 
    <a href="/"><img src="/img/logo.png" alt="Logo" class="logo" /></a> 
    <div id="loginBox"> 
     other code 
    </div> 
</div>

Y el css hasta ahora:

#header { 
    height: 130px; 
    margin: 5px 5px 0 5px; 
    border: #0f0f12 outset 2px; 
    border-radius: 15px; 
} 

#loginBox { 
    float: right; 
    width: 23.5%; 
    height: 128px; 
    font-size: 75%; 
} 

.headerBg { 

} 

.logo { 
    width: 50%; 
    height: 120px; 
    float: left; 
    display: block; 
    padding: 5px; 
}

Lo que estoy tratando de lograr, es tener la imagen "headerBg.jpg" pantalla a 100 % de ancho del "encabezado" div, por lo que esencialmente será el fondo del div mismo. Luego haga que la imagen "logo.png" y el div "loginBox" se muestren arriba de "headerBg.jpg".

El logotipo debe flotar hacia el extremo izquierdo y el loginBox flota hacia la derecha como en el css.

Con la imagen eliminada, el logotipo y div se colocan correctamente, pero cuando se introduce la imagen, se colocan dos elementos flotados después de la imagen en el flujo.

He intentado varias adiciones y reconfiguraciones, pero ninguna ha funcionado como yo quería.

He agregado la imagen en el CSS como fondo del encabezado div, pero no se estira al 100% de esa manera.

¿Alguien podría darnos una idea de esto?

¡También cualquier tutorial que cubra este tipo de cosas sería una gran adición a mi colección!

¡Gracias!

Fuente

2012-04-14 Craig van Tonder

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Render this</title> 
    <style type="text/css"> 
#header { 
    position:relative; 
    height: 130px; 
    margin: 5px 5px 0 5px; 
    border: #0f0f12 outset 2px; 
    border-radius: 15px; 
} 

#loginBox { 
    position:relative; 
    float: right; 
    width: 23.5%; 
    height: 128px; 
    font-size: 75%; 

} 

.headerBg { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
} 

.logo { 
    position:relative; 
    width: 50%; 
    height: 120px; 
    float: left; 
    display: block; 
    padding: 5px; 
} 
    </style> 
</head> 
<body> 
<div id="header"> 
    <img src="img/headerBg.jpg" alt="" class="headerBg" /> 
    <a href="/"><img src="img/logo.png" alt="Logo" class="logo" /></a> 
    <div id="loginBox"> 
     other code 
    </div> 
</div> 

</body> 
</html>

Fuente

2012-04-14 21:50:49 chadpeppers

gracias por su respuesta, pero esto no resuelve el problema para mí. Lo he intentado pero como la imagen tiene 1084 píxeles de ancho, cuando la resolución de la pantalla aumenta, no ocupa todo el ancho del contenedor, en este caso 'header' ya que aumenta para coincidir con el ancho del monitor.Es originalmente por lo que elegí tener la imagen en el código para poder estirarla. –

use el fondo de pantalla: 100% 100%; – chadpeppers

Eso es css3 y no es muy amigable para el navegador:/Es por eso que estaba tratando de encontrar una manera de cambiar el tamaño de la imagen sin recurrir a eso. –

Simplemente haga que la imagen de fondo del encabezado sea el verdadero fondo de ese div. Float no ignora otros objetos de la misma manera que position: absolute does.

#header { 
    height: 130px; 
    margin: 5px 5px 0 5px; 
    border: #0f0f12 outset 2px; 
    border-radius: 15px; 
    background: url(headerBg.jpg); 
}

Fuente

2012-04-14 21:51:26 mxniu

Hola y gracias, pero esto no me permite estirar la imagen para que se ajuste al ancho de una div elástica. –

.header { 
    position: relative; 
} 

.headerBg { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    width: 100%; 
}

Tenga en cuenta que esto va a escalar la imagen a la anchura de la <div>; si solo quieres que cambie el tamaño horizontalmente, entonces debes establecer la altura explícitamente.

También puede probar max-width: 100%; si solo desea que la imagen se escale en ventanas grandes.

Fuente

2012-04-14 22:22:30 Neil

Establezca la clase div que no mostrará ninguna pieza adicional.

div { 
overflow: hidden; 
}

Fuente

2013-06-17 04:47:47 fahomid

Estos ajustes trabajado perfecto para mí .. lo hará tamaño de la foto del ur para todas las fotografías ..

#headerBg { 
position: absolute; 
top: 0px; 
left: 0px; 
right: 0px; 
width: 100%; 
height: 100%;

}

Fuente

2015-05-04 06:45:27 NICK

-1

trate de usar en su css:

max-height:100%;

Fuente

2017-02-22 06:22:29

Html/Css: cómo hacer que una imagen se estire al 100% del ancho de un contenedor y luego mostrar otra imagen sobre él?

Respuesta

Cuestiones relacionadas