Div does not respect image limit in css

Question

Div does not respect image limit in css

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I'm trying to put new divs in my html but they end up leaving the image area and I'm not getting them fixed inside the image just scrolling the scroll bar, how do I move the items and image stay in position? In this case it is my backgound ... follow example of how this is and example of how I would like

Mybackgroundimagecss

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

html css

asked by anonymous 31.03.2018 / 17:07

2 answers

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 may 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. This will allow you to serve a different resolution image 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 will not convert automatically, but will download according to the resolutions.

Note: Resolutions used are not defaults. So feel free to choose yours.

01.04.2018 / 01:13

Comment / caption in table rows Counter to insert blank line every 5 equal cells

score 2 · Accepted Answer

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

Here is 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>