2

Estoy jugando con el posicionamiento de imagenes responsives ( usando a nuestro amigo bootstrap) y quiero hacer una imagen base , como la del ejemplo en la que tengo un div con una imagen de fondo y sobre este varios div con imagenes ( con transparencia).

Todo ello responsive y siempre posicionado sobre el div principal , os pongo una foto de la intencion :

introducir la descripción de la imagen aquí

Ahora bien :

  • ¿Se puede hacer el fondo de un div responsive ?
  • ¿Como posiciono una imagen encima de otra ? Me refiero , si yo ahora mismo quisiera poner una carta encima de la otra, ¿ Como seria posible respetando los requisitos anteriores ?

Muchas gracias.

#color{
	background-image: url("https://preview.ibb.co/dmmFJK/Tablero1080.png");
	
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	   /* background:no-repeat fixed center;  */
	width:100%;
	height:100%;
	max-width:1080px;
	max-height:660px;
	margin-top:30px;
	

	
	
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Bj</title>
  </head>
  <body>
		<!-- The Modal -->
		<div class="container" id="color">

		  <div class="row justify-content-center">
			<div class="col-4" id="color2">
			  1 of two columns
			  <img src="https://image.ibb.co/mr7cXe/AS_co.png" class="img-fluid" alt="Responsive image">
			</div>
			<div class="col-4" id="color1">
			  2 of two columns
			  <img src="https://image.ibb.co/mr7cXe/AS_co.png" class="img-fluid" alt="Responsive image">
			</div>
		  </div>
		  
		  
		</div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

1 respuesta 1

0

No sé si entendí bien lo que quieres pero preparé un ejemplo que tal vez pueda ayudarte.

Primero, el HTML que contiene:

  • Un Div Contenedor.
  • Un segundo Div que contendrá las cards.
  • 2 divs que representan las cards.
  • 3 elementos <button> que estarán por fuera del contenedor.

    <div class="container">
        <div id="main-div">
        <div class="card position-card1" id="card1">card 1</div>
        <div class="card position-card2" id="card2">card 2</div>
    </div>
    
    <div id="botones">
        <button id="btn1">card 2 over card 1</button>
        <button id="reset">reset</button>
        <button id="btn2">card 1 over card 2</button>
    </div>
    

Ahora un poco de CSS:

En el Div contenedor, le doy un display:flex para dar solución a tu pregunta de hacerlo responsivo.

.container{
   display: flex;
   justify-content: center;   
}

El #main-div es el contenedor de las 2 cards, por lo tanto le doy positión: relative para poder ubicar las cards dentro de el.

#main-div{
    position: relative;
    min-width: 300px;
    height: 200px;
    background: rgb(255,240,0);
    border: 4px solid rgb(255,200,0);
}

Ahora le damos estilos a las cards. Las dos tendran un position: absolute para poder jugar con las coordenadas. El resto es maquillaje.

.card{
    position: absolute;
    width: 60px;
    height: 100px;
    background: rgb(0,255,0);
    border: 2px solid rgb(0,200,100);
    text-align: center;
    line-height: 100px;
}

Cada card se posiciona proporciolamente en su contenedor padre. (Recuerda que tienen position: absolute y se centran verticalmente.

.position-card1{
    top: 50px;
    left: 60px;
    z-index: 1;
}

.position-card2{
    top: 50px;
    left: 180px;
    z-index: 1;
}

Ahora para poder sobreponer una card encima de la otra, creo 3 botones para lanzar los eventos con javascript un botón para sobreponer la card2 sobre la card1 otro para disparar el efecto contrario. y por último un botón reset para reiniciar las posiciones.

.over-card2{
    top: 46px;
    left: 176px;
    z-index: 100;
}

.over-card1{
    top: 46px;
    left: 56px;
    z-index: 100;
}

#botones{
    display: flex;
    justify-content: center;  
}

#reset,
#btn1{
    margin-right: 15px;
}

Por último, el código Javascript:

recupero los elementos del dom (los 3 botones) en 3 variables:

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var reset = document.getElementById('reset');

Programo los botones :

btn1.addEventListener('click', function(){
    let card2 = document.getElementById('card2');
    card2.classList.replace('position-card2','over-card1');
});

btn2.addEventListener('click', function(){
    let card1 = document.getElementById('card1');
    card1.classList.replace('position-card1','over-card2');
});

*La clase over se adiciona para que siempre se superposicione con z-index *


Y por último el botón que restaura las cards a la posición inicial.

reset.addEventListener('click', function(){
    let reset = document.getElementById('reset');
    card1.className = 'card position-card1';
    card2.className = 'card position-card2';
});

Adjunto el código ya completo y además, Puedes Probar el efecto aquí abajo. Espero te sirva o por lo menos te de ideas para mejorarlo y muy seguramente con JQuery salga con menos lineas. Bendiciones !

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var reset = document.getElementById('reset');

btn1.addEventListener('click', function(){
  let card2 = document.getElementById('card2');
  card2.classList.replace('position-card2','over-card1');
});

btn2.addEventListener('click', function(){
  let card1 = document.getElementById('card1');
  card1.classList.replace('position-card1','over-card2');
});

reset.addEventListener('click', function(){
  let reset = document.getElementById('reset');
  card1.className = 'card position-card1';
  card2.className = 'card position-card2';
});
.container{
    display: flex;
    justify-content: center;   
}

#main-div{
  position: relative;
  min-width: 300px;
  height: 200px;
  background: rgb(255,240,0);
  border: 4px solid rgb(255,200,0);
}

.card{
  position: absolute;
  width: 60px;
  height: 100px;
  background: rgb(0,255,0);
  border: 2px solid rgb(0,200,100);
  text-align: center;
  line-height: 100px;
}

.position-card1{
  top: 50px;
  left: 60px;
  z-index: 1;
}

.position-card2{
  top: 50px;
  left: 180px;
  z-index: 1;
}

.over-card2{
  top: 46px;
  left: 176px;
  z-index: 100;
}

.over-card1{
  top: 46px;
  left: 56px;
  z-index: 100;
}

#botones{
  display: flex;
  justify-content: center;  
}

#reset,
#btn1{
  margin-right: 15px;
}
<div class="container">
  <div id="main-div">
      <div class="card position-card1" id="card1">card 1</div>
      <div class="card position-card2" id="card2">card 2</div>
  </div>  
</div>

<div id="botones">
  <button id="btn1">card 2 over card 1</button>
  <button id="reset">reset</button>
  <button id="btn2">card 1 over card 2</button>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.