I have a DIV (.main) that contains a background-image. A TOS text overlays the background image. Everything is fine when the browsers window is extended, but once I shrink it too much down, the text from TOS overflow the image.
You can see the problem LIVE by going on my website and resizing the window. https://royalkingdom.net/store/
I've already tried to play with the padding, margins, max-height and max-width.
/* Main column */
.main {
flex:60%;
height:940px;
margin-bottom:10vh;
padding-right:8%;
}
#bgimg {
position: relative;
height:100%;
width:100%;
background-image: url("https://i.imgur.com/NPhmcae.png");
background-size: 100%;
background-repeat: no-repeat;
background-position:center top; ;
display: block;
padding-top:13%;
padding-right:10%;
padding-left:10%;
padding-bottom:13%;
}
.panel-body {
text-align:justify;
padding:1px;
width: auto;
max-height: 100%;
display: inline-block;
}
I expect to have the text to fit the image size. Even when I resize my browser window. It is fine if it needs to have a scrollbar (when the window size is too small)
Please try code -
.panel-body {
text-align: justify;
padding: 1px;
width: auto;
max-height: 75vh;
display: inline-block;
overflow-y: scroll;
}
I think what you need to add is background-size: 100% 100%;
Check out this JSFiddle that I set up to mimic your div. That second 100% forces the image to be the full width of the div, as the image was not expanding with the height of the div. If you take away that second 100% in the JSFiddle you will see that the red border still expands but the image does not.
#div2{ background-image:url(https://i.imgur.com/NPhmcae.png); background-size: 100% 100%; background-repeat: no-repeat; background-position:center top; display: block; padding-top:13%; padding-right:10%; padding-left:10%; padding-bottom:13%; height:auto; width:auto; border: 1px solid red; }
<div id="div2"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit. </p> </div>
One problem you might encounter is if you have too much/too little text the image will be greatly distorted.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.