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
    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
    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
    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/bootstrap@5.0.2/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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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