Div does not respect image limit in css

Asked

Viewed 210 times

2

I’m trying to get new ones divs in my html however they end up leaving the area of the image and I’m not able to leave them fixed inside the image just walking through the scroll bar, how do I move the items and the image stay in position? In that case it’s mine backgound... follows example of how this and example of how I would like

Esta assim

gostaria assim

My background image css 

.fundoLogin{
    background-size: cover;
    background-position: center center;
    background-image: url("../../Core/assets/img/fundoLogin.jpg");
    background-repeat: no-repeat!important;;
    background-attachment: fixed!important;
}
html css

  • It’s not very clear. The background image is not getting fixed?

  • From what I understand the problem is that the image is very small, put your html and css code relevant

  • try increasing . fundologin [ height:100%]

2 answers

2


Gabriel from what I understood of the question you want the background to occupy the whole screen and that it stay fixed even when you give the scroll in the correct p[imagine?

Well, for that you need to set a time for the body, in the case of 100%, then you need to set the property background-attachment:fixed in the background, so it stays fixed while you scroll the page.

See a simple example for you to understand how the property works:

html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        body {
            height: 100%;
            width: 100%;
            background-attachment: fixed;
            background-image: url('https://picsum.photos/400/300');
            background-size: cover; 
            background-position: center center;
            margin: 0;
            color: aliceblue;
            font-size: 32px;
            font-family: sans-serif;
        }
<div>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
        <li>item 7</li>
        <li>item 8</li>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
        <li>item 7</li>
        <li>item 8</li>
    </ul>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
        <li>item 7</li>
        <li>item 8</li>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
        <li>item 7</li>
        <li>item 8</li>
    </ul>
</div>

1

I’m not sure if this is the best approach, but it works. Also, remember that the following code only works with a single resolution. Therefore, the image can be pixelated.

.fundo-login {  
  background-attachment: fixed; /* Faz com que a imagem fique fixa */
  background-image: url('https://picsum.photos/354/300');
  background-size: cover; /* Faz com que a imagem se estenda proporcionalmente */
  background-position: center center; /* A propriedade anterior pode recortar a image. Por isso, usaremos o background-position para centralizar o corte e tentar capturar o foco da imagem. */
}
<body class="fundo-login">
  <div>
    Alguma besteira aqui dentro.
  </div>
</body>

If you want to solve the mentioned problem (pixelated image), alternatively, you can use this other approach. Thus, you will be able to serve an image with different resolution for each viewport.

.fundo-login {
  background-attachment: fixed; /* fixa imagem */
  background-image: url('https://picsum.photos/354/300');
  background-size: cover;
  background-position: center center;
}

@media (min-width: 530px) { /* Baixa imagem igual a anterior, mas com resolução de  530x420*/
  .fundo-login {
    background-image: url('https://picsum.photos/530/420');
  }
}

@media (min-width: 720px) { /* Baixa imagem igual a anterior, mas com resolução de 720x530*/
  .fundo-login {
    background-image: url('https://picsum.photos/720/530');
  }
}


@media (min-width: 1024px) { /* Baixa imagem igual a anterior, mas com resolução de 1024x780*/
  .fundo-login {
    background-image: url('https://picsum.photos/1024/780');
  }
}
<body class="fundo-login">
  <div>
    Alguma besteira aqui dentro.
  </div>
</body>

Note: To use the previous method, you must render the different resolutions in some appropriate program and then put them on the server. So, in other words, the browser won’t convert automatically, but download according to resolutions.

Note: the resolutions used are not standards. So feel free to choose your.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.