CSS - Problemas con cajas en background-position

 
Vista:

Problemas con cajas en background-position

Publicado por Javier (24 intervenciones) el 06/08/2019 00:37:17
Hola gente, quise hacer un ejercicio y no logro que las cajas me queden como en el ejemplo de donde estudie.

Tendrian que quedar como la figura 4.24 y abajo dejo el link.

http://dis.um.es/~lopezquesada/documentos/IES_1213/LMSGI/curso/UT5/libroswebcss/www.librosweb.es/css/capitulo4/fondos.html


Y lo que a mi me queda es esto.

1
2
3
4
5
caja1 {background-image:url(Imagenes de fondo/Interrogación.jpg);background-repeat:no-repeat;background-position:bottom left;}
 
caja2 {background-image:url(Imagenes de fondo/Interrogación.jpg);background-repeat:no-repeat;background-position:right top;}
 
caja3 {background-image:url(Imagenes de fondo/Interrogación.jpg);background-repeat:no-repeat;background-position:50% 50%;}



1
2
3
4
5
6
7
<body>
 
<div id="caja1"><h1>bottom left</h1></div>
<div id="caja2"><h1>right top</h1></div>
<div id="caja3"><h1>50% 50%</h1></div>
 
</body>


En que le estoy errando ?, le intente poner bordes y ancho y alto a las cajas pero no me muestra nada.las imagenes no me interesan eso lo veo despúes solo me interesa que las cajas queden como en el ejemplo una al
lado de la otra y no que me queden como a mi una abajo de la otra y que se muestren los bordes, gracias.
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

Problemas con cajas en background-position

Publicado por Javier (24 intervenciones) el 14/08/2019 04:00:39
Bueno, para el que le interese encontre la solución,si lo quieren probar usen su propia imagen porque la mia obviamente no les saldrá.

Les dejo los códigos.

1
2
3
4
5
6
7
<body>
 
<div id="caja1"><h1>bottom left</h1></div>
<div id="caja2"><h1>right top</h1></div>
<div id="caja3"><h1>50% 50%</h1></div>
 
</body>



1
2
3
4
5
6
7
div {display:inline-block;}
 
#caja1 {background-image:url("Imagenes de fondo/Interrogación.jpg");background-repeat:no-repeat;background-position:bottom left;width:165px;height:300px;border:1px solid black;margin-left:15px;margin-right:14px;}
 
#caja2 {background-image:url("Imagenes de fondo/Interrogación.jpg");background-repeat:no-repeat;background-position:right top;width:165px;height:300px;border:1px solid black;margin-left:14px;margin-right:14px;}
 
#caja3 {background-image:url("Imagenes de fondo/Interrogación.jpg");background-repeat:no-repeat;background-position:50% 50%;width:165px;height:300px;border:1px solid black;margin-left:14px;}
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
Revisar política de publicidad