Como posicionar imagen de "background-image"
Publicado por Israel (51 intervenciones) el 08/05/2020 01:19:30
He colocado dentro de una etiqueta <section> una foto desde CSS con la propiedad "background-image". Para que esta cupiera en anchura dentro de <section> he utilizado la propiedad "background-size:100%". Solo
he indicado el 100% para la anchura para que se mantengan las proporciones.
Ahora no se ve el 100% de la altura de la foto pq esta es mayor que la altura de <section>. Asumo que debe ser así si no quiero modificar las proporciones de la foto o aumentar la altura de <section>, pero quiero subir la foto un poco para que dentro de <section> entre la parte que me interesa. Si utilizo las propiedades "position:relative" y "top:" modifico la posicion de <section> pero no así de la foto que contiene. Como podria hacerlo?
he indicado el 100% para la anchura para que se mantengan las proporciones.
Ahora no se ve el 100% de la altura de la foto pq esta es mayor que la altura de <section>. Asumo que debe ser así si no quiero modificar las proporciones de la foto o aumentar la altura de <section>, pero quiero subir la foto un poco para que dentro de <section> entre la parte que me interesa. Si utilizo las propiedades "position:relative" y "top:" modifico la posicion de <section> pero no así de la foto que contiene. Como podria hacerlo?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<head>
<style>
.marco{
width:700px; height:410px; margin:auto;background-image: url(Imagenes/Carbonero_comun.jpg);
background-size:100%;}
</style>
</head>
<body>
<header>
<h1>Aves de nuestros campos</h1>
</header>
<section class="marco">
</section>
</body>
- Carbonero_comun.rar(167,3 KB)
Valora esta pregunta
0
