background image expanding with the content

Question

I am having a problem in a scenario where I need my background image to expand dynamically with the content in the body.

 function myclick() { var text = 'Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.' document.getElementById("demo").innerHTML = text + text; } 

 html { height: 100%; width: 100%; } body { height: 100%; width: 100%; } #root { height: 100%; width: 100%; } .background { background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg); background-size: cover; background-repeat: no-repeat; padding-bottom: 4.2%; height: 100%; } .base { margin: auto; background-color: white; margin-bottom: 2%; height: auto; width: 665px; display: block; border-radius: 5px; top: 40px; position: relative; } 

 <body> <div id="root"> <div class="background"> <div class="base"> <p id="demo"></p> Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram. Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an. Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his. Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei. Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix. </div> </div> </div> <button onclick="myclick()">Click me</button> </body> 

if you click on the button on the top the content of the body increases but the size of the background still remains same. Is there any way to have this working?

Answer 1

You can just use min-height:100%; instead of height:100%; in .background class

 function myclick() { var text = 'Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.' document.getElementById("demo").innerHTML = text + text; } 

 html { height: 100%; width: 100%; } body { height: 100%; width: 100%; } #root { height: 100%; width: 100%; } .background { background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg); background-size: cover; background-repeat: no-repeat; padding-bottom: 4.2%; min-height: 100%; } .base { margin: auto; background-color: white; margin-bottom: 2%; height: auto; width: 665px; display: block; border-radius: 5px; top: 40px; position: relative; } 

 <body> <div id="root"> <div class="background"> <div class="base"> <p id="demo"></p> Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram. Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an. Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his. Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei. Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix. </div> </div> </div> <button onclick="myclick()">Click me</button> </body> 

Answer 2

There's a css property Background-Size

https://www.w3schools.com/cssref/css3_pr_background-size.asp

background-size: cover may be a good fit for your use case. Another option is contain .

Answer 3

Remove the height of your background class and add a float left to it (also give it width 100% to manage the float)

Here's a working example:

 function myclick() { var text = 'Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.' document.getElementById("demo").innerHTML = text + text; } 

 html { height: 100%; width: 100%; } body { height: 100%; width: 100%; } #root { height: 100%; width: 100%; } .background { background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg); background-size: cover; background-repeat: no-repeat; padding-bottom: 4.2%; /* height: 100% */ width: 100%; /* To manage float resize */ float: left; /* To follow content height */ } .base { margin: auto; background-color: white; margin-bottom: 2%; height: auto; width: 665px; display: block; border-radius: 5px; top: 40px; position: relative; } 

 <div id="root"> <div class="background"> <div class="base"> <p id="demo"></p> Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram. Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an. Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his. Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei. Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix. </div> </div> </div> <button onclick="myclick()">Click me</button>