Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Fondo

CSS - Fondo

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Fondo

Publicado por José María (1 intervención) el 03/10/2022 22:23:03
Quiero que las 4 fotos queden de fondo de pantalla, y que todas estén como las dos de la izquierda, es decir, pegadas al borde, el problema sería mover las dos de la derecha a la derecha. Las imágenes tienen que tener el tamaño ajustable, y en el espacio que quedaría en medio de las cuatro fotos, un fondo en negro en el que escribir texto.

No sé si me estoy explicando bien, adjunto código.

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE HTML>
<head>
	<meta http-equiv=Content-Type content="text/html; charset=utf-8">
	<title></title>
<style>
body, html { height:100%;
	margin:0;
	padding:0;
	width:100%;
}
 
.recuadro {
	width:49.5%;
	display:inline-block;
	height:49.5%;
}
#uno{
	}
#dos{
  margin-left: 100;
 
	}
#tres{
	}
#cuatro{
	}
 
  .tuclase {
text-align: center;
align-content: center;
align-self: center;
font-family: Arial Black;
font-weight: bold;
font-size: 30px;
color: #fff;
text-shadow: 0 1px 0 #ddd, 0 2px 0 #ccc, 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 0 #acacac, 0 6px 1px rgba(0,0,0,0.1), 0 0 5px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.3), 0 3px 5px rgba(0,0,0,0.2), 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.2), 0 20px 20px rgba(0,0,0,0.15);
}
</style>
</head>
<body>
	<div class='recuadro' id="uno" >
		<img  src="imagenes/battlefield-2-1.jpg" frameborder="0" allowfullscreen></img>
	</div>
	<div class='recuadro' id="dos" man-left="100px">
		<img   margin=100px src="imagenes/battlefield-3-1.jpg" frameborder="0" allowfullscreen></img>
	</div>
	<br>
	<div class='recuadro' id="tres">
		<img  src="imagenes/battlefield-4-1.jpg" frameborder="0" allowfullscreen></img>
	</div>
 
	<div class='recuadro' id="cuatro">
		<img src="imagenes/battlefield-5-1.jpg" frameborder="0" allowfullscreen></img>
	</div>
<div>
</div>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Ivan

Fondo

Publicado por Ivan (45 intervenciones) el 05/10/2022 19:31:22
Hola,

el principal problema que veo es que no tienes en cuenta el modelo de caja de HTML y CSS, que es como se contruyen y distribuyen los espacios en una web.

Puedes encontrar información en la documentación oficial y estas páginas muy didácticas:

https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/The_box_model
https://www.w3schools.com/css/css_boxmodel.asp

Dicho esto, entiendo que para conseguir lo que quieres debes construir una retícula de 3x3 y escribir en la celda central. Esto se puede conseguir de varias formas, te pongo una forma con flex.

A las celdas que quieres poner una imagen le añades una clase a parte para decirle la imagen de fondo, si son diferentes imágenes no queda más remedio que hacer una clase por cada imagen.

El resultado final es este:

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  background-color: DodgerBlue;
}
.flex-container > div {
  background-color: #f1f1f1;
  width: 100%;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
.BGimg1 {
	background-image: url('https://www.google.com/logos/doodles/2022/nigeria-independence-day-2022-6753651837109649-2xa.gif');
    background-position: center;
    background-size: cover;
}
.BGimg2 {
	background-image: url('https://www.google.com/logos/doodles/2022/armenia-independence-day-2022-6753651837109647.3-2xa.gif');
    background-position: center;
    background-size: cover;
}
.BGimg3 {
	background-image: url('https://www.google.com/logos/doodles/2022/emil-zatopek-and-dana-zatopkovas-100th-birthday-6753651837109504-2xa.gif');
    background-position: center;
    background-size: cover;
}
.BGimg4 {
	background-image: url('https://www.google.com/logos/doodles/2022/celebrating-the-lampang-rooster-bowl-6753651837109500-2xa.gif');
    background-position: center;
    background-size: cover;
}
</style>
</head>
<body>
<h1>Flex div</h1>
<div class="flex-container">
  <div class="BGimg1">1</div>
  <div>2</div>
  <div class="BGimg2">3</div>
</div>
<div class="flex-container">
  <div>4</div>
  <div>Cada celda intenta ocupar el espacio proporcionalmente al espacio disponible</div>
  <div>6</div>
 </div>
 <div class="flex-container">
  <div class="BGimg3">7</div>
  <div>8</div>
  <div class="BGimg4">9</div>
</div>
</body>
</html>

Espero que te sirva, un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar