0

Necesito ayuda con CSS, me resulta difícil controlar la imagen para que este este posicionada a la derecha pegada al borde derecho de la capa.

introducir la descripción de la imagen aquí

.rosa {
  
  background-image: url(https://i.imgur.com/xnLwCbO.png);
  background-position: center center;
  background-attachment: absolute;
  background-size: cover;
  background-color: #000000;
  width:200px;
  height:200px;
  position: absolute;
float:right;
  top: 0px;

}
   <div class="rosa float-right"></div>

como verán en la imagen, la rosa se queda a la izquierda de la pantalla. ayuda por favor

3
  • left = izquierda. right = derecha.
    – Mateo
    Commented el 28 ene. 2022 a las 3:57
  • 1
    Pon más contexto, tal como lo tienes no se mueve ni a tiros. El div termina con la imagen de fondo, no da para más. Necesitamos ver su contenedor porque quizas el no abarca todo el ancho.
    – masterguru
    Commented el 28 ene. 2022 a las 4:02
  • A ver, como te decia, el div no se mueve porque no sabemos que contenedor usas. Si por ejemplo lo pones dentro de <div class="row"></div> entonces te cogerá todo el ancho y se moverá hacia la derecha (pero quizas no como tu piensas). Ahora mismo, tu div es de 200px de ancho debido a la clase rosa y no se moverá a menos que su contenedor sea más ancho que eso.
    – masterguru
    Commented el 28 ene. 2022 a las 4:10

1 respuesta 1

1

Buen día,

En las etiquetas que pusiste a tu pregunta pusiste que usas bootstrap pero no lo veo en tu código así que pondré las dos respuestas

Si usas Bootstrap 5:

  1. No olvides utilizar el css en el cabecero de tu html
  2. Debes crear un div que contenga al que tienes con clase "rosa":
  3. En el css a tu clase "rosa" le quite la propiedad float

.rosa {
  
  background-image: url(https://i.imgur.com/xnLwCbO.png);
  background-position: center center;
  background-attachment: absolute;
  background-size: cover;
  background-color: #000000;
  width:200px;
  height:200px;
  position: absolute;

  top: 0px;

}
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   <div class="d-flex justify-content-end">
     <div class="rosa"></div>
   </div>

Si no usas Bootstrap

  1. Debes crear un contenedor
  2. El contenedor debe tener las propiedades display:flex; y justify-content: end;

.rosa {
  
  background-image: url(https://i.imgur.com/xnLwCbO.png);
  background-position: center center;
  background-attachment: absolute;
  background-size: cover;
  background-color: #000000;
  width:200px;
  height:200px;
  position: absolute;

  top: 0px;

}
.contenedor{
  display: flex;
  justify-content: end;
}
   <div class="contenedor">
     <div class="rosa"></div>
   </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.