Estoy creando mi portafolio web, pero soy un principiante y no sé cómo mover el fondo de la imagen. ¿Me puedes ayudar? Para mejor imagínese, mire la imagen. ¡Gracias por cualquier consejo!

-2
Dominik Smolinský 4 mar. 2021 a las 12:59

2 respuestas

La mejor respuesta

Primero, lea este artículo: https://stackoverflow.com/help/how-to-ask (Su Q no sigue las guías de StackOverflow == > Demasiado general + sin ningún código).

Una forma de crear este efecto es mediante valores absolutos y negativos de posición.

** tenga en cuenta que los valores negativos pueden crear problemas de desbordamiento y / o desplazamiento horizontal.

Ejemplo básico:

main{
  display: flex;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: 900px;
  background: lightgray;
}

.col_1{
  flex-basis: 40%;
  padding: 10px;
}

.col_2{
  flex-basis: 60%;
  padding: 10px;
}

.wrapper{
  position: relative;
  margin-right: 10px;
}

.wrapper img{
  position: relative;
  z-index: 100;
  width: 100%;
  height: auto;
}
.wrapper .overlay{
  background: red;
  position: absolute;
  left: 10px;
  right: -10px;
  top: 10px;
  bottom: -5px;
}
<main>
  <div class="col_1">
    <h1>Hello World</h1>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </div>
  <div class="col_2">
    <div class="wrapper">
      <div class="inline-block">
        <div class="overlay"></div> 
        <img src="https://picsum.photos/600/400"/>
      </div>
    </div>

  </div>

</main>
1
Ezra Siton 4 mar. 2021 a las 11:36

No estoy seguro de a qué te refieres con la pregunta, pero intentaré adivinar.

Puede establecer la posición de la imagen con background-position: y en lugar del centro como en mi código, puede usar cm (centímetros), px (píxeles) o muchos otros comandos. Si quieres que responda para que se ajuste cuando cambias el tamaño de la ventana, usando JavaScript o Se recomendaría Bootstrap.

body { 
      background-image: url('w3css.gif');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center; 
    }
0
stafino 4 mar. 2021 a las 10:07