Imagen fija en una capa o en el navegador
Publicado por Marta (32 intervenciones) el 07/03/2021 14:52:56
Buenas,
Dentro de la capa "fons1" existen dos subcapas:
- imatges1: contiene una imagen que ocupa todo el navegador
- contingut1: es texto, repartido en 3 columnas que ocupan el 75% del navegador, que aparece junto al final de imatges.
Necesito:
- ubicar una imagen en imatges1 (esta imagen es el background de motiu1), de manera que esté fija en la pantalla, mientras la capa imatges1 esté visible, cuando desparezca por el scroll, pues esta deje de ser visible
- ubicar la capa marc en capitol1, de manera que siempre esté visible en la misma posición mientras toda la capa esté visible
Tal como está el código la capa marc funciona tal como quiero, pero motiu1 no consigo que desaparezca con imatges1. Alguna sugerencia?
Gracias
El codigo CSS es:
Dentro de la capa "fons1" existen dos subcapas:
- imatges1: contiene una imagen que ocupa todo el navegador
- contingut1: es texto, repartido en 3 columnas que ocupan el 75% del navegador, que aparece junto al final de imatges.
Necesito:
- ubicar una imagen en imatges1 (esta imagen es el background de motiu1), de manera que esté fija en la pantalla, mientras la capa imatges1 esté visible, cuando desparezca por el scroll, pues esta deje de ser visible
- ubicar la capa marc en capitol1, de manera que siempre esté visible en la misma posición mientras toda la capa esté visible
Tal como está el código la capa marc funciona tal como quiero, pero motiu1 no consigo que desaparezca con imatges1. Alguna sugerencia?
Gracias
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="capitol1">
<div id="fons1">
<div id="imatges1"></div>
<div class="contingut1">
<div class="titol1">Mai més</div>
<div class="texte1">
<div class="lletra1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident quis modi quae ex tempora, debitis porro rem. Ipsum eveniet exercitationem, provident repudiandae quos omnis pariatur totam nobis quaerat adipisci alias?<br/>
Distinctio tenetur temporibus facilis ullam corrupti! Odit consequatur id nisi voluptas eius repudiandae iste temporibus, corporis harum ab cupiditate non? Facilis amet, asperiores deleniti autem perferendis sapiente repellendus libero voluptate.<br/>
Dolorum repellendus ab, voluptates quia, iusto recusandae dolor ipsa natus exercitationem modi eveniet autem eum ipsum repellat. Illum, voluptatum, est repudiandae placeat repellendus id harum alias ipsum nobis, asperiores ipsam.<br/>
</div>
</div>
</div>
</div>
<div id="motiu1"></div>
<div class="avio"></div>
<div class="bomba"></div>
<div class="marc">
<img class="dreta" src="imatges/noiaEsquerra.png">
<img class="esquerra" src="imatges/noiaDreta.png">
</div>
</div>
El codigo CSS es:
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
26
27
28
29
30
31
32
33
#capitol1 { position: relative;}#imatges1 {background: url(../imatges/fons.jpg) center center;
background-size: cover;
width: 100vw; height: 100vh; position: relative; overflow: hidden;}#motiu1 {background: url(../imatges/titol1.png) no-repeat right;
background-size: 14vw;
position: fixed;left: 6%;
top: 11%;
width: 15vw; height: 54vh;}.marc {
border: 10px solid #dfe0df;
transform: rotate(10deg);
position: fixed;right:8%;
height:30%;
top: 39%;
float: left; /* per què s'ajuntin les imatges */
}Valora esta pregunta
0
