CODEWITHSUNDEEP
htmlcss
user1032531
user1032531

Reputation: 26281

Cover background with overflow scroll bar

I wish to cover the entire screen with an image. Great, background-size: cover; comes to the rescue. But then I want to include another element which has a fixed width with a scroll bar. When doing so and making the screen smaller, the entire screen is no longer covered. See https://output.jsbin.com/rogupezopu (screenshot and code duplicated below). How do I cover the entire screen when utilizing a overflow scroll bar?

enter image description here

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>
        <style type="text/css">
            body,div {margin:0;padding:0;}

            #wrapper {
                height:840px;
                background-image:url(http://s24.postimg.org/781yqtfdh/background2.jpg);
                background-repeat: no-repeat;
                background-size: cover;
                background-attachment: fixed;  /*http://stackoverflow.com/a/19364033/1032531 Doesn't work*/
                /* background-attachment: scroll; */  /*http://stackoverflow.com/a/23050520/1032531 Doesn't work*/
                /* background-size: 100% 100%; also doesn't work */
                /* background-position: center; probably redundent? */ 
            }
            #content {
                margin:0 auto;
                width: 960px;
                height:100%;
                overflow:auto;
            }
        </style> 
    </head>

    <body>
        <div id="wrapper">
            <div id="content">
                Ius ne quod posidonium, agam apeirian gubergren id eos, dolores percipit vis ex. Ex discere liberavisse his, sonet nominati conclusionemque et vis. Et admodum oporteat sit, eam facer affert mediocritatem ad, mea id omnium instructior. Pri ex natum option incorrupte, sit unum pertinax theophrastus ut.

                Nam an saperet delectus tractatos. Ad option persecuti appellantur usu. Dicta habemus fuisset per ea, ius adhuc iracundia ei. Te timeam integre pro, ex dolore possim audiam vis.

                Nam te tamquam omittam, eu diceret complectitur ius, quem omnesque sensibus in vel. Has eirmod accumsan atomorum ut, vel ei quod omittantur, expetendis neglegentur eu vim. Ad audiam fuisset cum. Quis mutat fabellas te nam, usu ut sumo suscipiantur, eos at lorem aeque graeci. In paulo disputationi ius, vide dissentias sadipscing eos cu.

                Usu te graece vivendo, ludus latine nonumes te has. Pri id quando tantas offendit, nam ea viderer dissentiet. Facilis consequat concludaturque sea ut, an mel persius evertitur eloquentiam. Facilisis repudiare conceptam sit an.
            </div>
        </div>
    </body> 
</html>

Upvotes: 0

Views: 168

Answers (2)

Joel Almeida
Joel Almeida

Reputation: 8037

Your #content has a fixed width.

#wrapper has width:100% by default.

#wrapper will have the width of the screen.

So, the problem is that the background-size:cover is on the #wrapper and therefore will be limited to the screen width.

Solution? Move the background to the #content or increase the #wrapper width to a fixed value also with min-width: 960px.

Another solution would be limiting the size of the #content with width: 100%; max-width: 960px;

Solution 1:

body,
div {
  margin: 0;
  padding: 0;
}
#wrapper {
  height: 840px;
  background-image: url(http://s24.postimg.org/781yqtfdh/background2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
#content {
  margin: 0 auto;
  width: 960px;
  height: 100%;
  overflow: auto;
}
@media screen and (max-width: 960px) {
  #wrapper {
    background: none;
  }
  #content {
    background-image: url(http://s24.postimg.org/781yqtfdh/background2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  }
}
<div id="wrapper">
  <div id="content">
    Ius ne quod posidonium, agam apeirian gubergren id eos, dolores percipit vis ex. Ex discere liberavisse his, sonet nominati conclusionemque et vis. Et admodum oporteat sit, eam facer affert mediocritatem ad, mea id omnium instructior. Pri ex natum option
    incorrupte, sit unum pertinax theophrastus ut. Nam an saperet delectus tractatos. Ad option persecuti appellantur usu. Dicta habemus fuisset per ea, ius adhuc iracundia ei. Te timeam integre pro, ex dolore possim audiam vis. Nam te tamquam omittam,
    eu diceret complectitur ius, quem omnesque sensibus in vel. Has eirmod accumsan atomorum ut, vel ei quod omittantur, expetendis neglegentur eu vim. Ad audiam fuisset cum. Quis mutat fabellas te nam, usu ut sumo suscipiantur, eos at lorem aeque graeci.
    In paulo disputationi ius, vide dissentias sadipscing eos cu. Usu te graece vivendo, ludus latine nonumes te has. Pri id quando tantas offendit, nam ea viderer dissentiet. Facilis consequat concludaturque sea ut, an mel persius evertitur eloquentiam.
    Facilisis repudiare conceptam sit an.
  </div>
</div>

Solution 2:

Using min-width in the #wrapper.

body,
div {
  margin: 0;
  padding: 0;
}
#wrapper {
  height: 840px;
  background-image: url(http://s24.postimg.org/781yqtfdh/background2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-width: 960px;
}
#content {
  margin: 0 auto;
  width: 960px;
  height: 100%;
  overflow: auto;
}
<div id="wrapper">
  <div id="content">
    Ius ne quod posidonium, agam apeirian gubergren id eos, dolores percipit vis ex. Ex discere liberavisse his, sonet nominati conclusionemque et vis. Et admodum oporteat sit, eam facer affert mediocritatem ad, mea id omnium instructior. Pri ex natum option
    incorrupte, sit unum pertinax theophrastus ut. Nam an saperet delectus tractatos. Ad option persecuti appellantur usu. Dicta habemus fuisset per ea, ius adhuc iracundia ei. Te timeam integre pro, ex dolore possim audiam vis. Nam te tamquam omittam,
    eu diceret complectitur ius, quem omnesque sensibus in vel. Has eirmod accumsan atomorum ut, vel ei quod omittantur, expetendis neglegentur eu vim. Ad audiam fuisset cum. Quis mutat fabellas te nam, usu ut sumo suscipiantur, eos at lorem aeque graeci.
    In paulo disputationi ius, vide dissentias sadipscing eos cu. Usu te graece vivendo, ludus latine nonumes te has. Pri id quando tantas offendit, nam ea viderer dissentiet. Facilis consequat concludaturque sea ut, an mel persius evertitur eloquentiam.
    Facilisis repudiare conceptam sit an.
  </div>
</div>

Upvotes: 2

Sebastien
Sebastien

Reputation: 1102

Add overflow: auto; to your #wrapper element.

Doing this, your wrapper will extend to its content, and will be the one that scrolls, not your document.

Upvotes: 1

Related Questions