I am attempting to create two distinct "layers" of background on my webpage by encapsulating the content within a div element. Strangely, the background set for the div is being clipped before it reaches the edge of the screen, while the one designated as the body background image is not experiencing this issue. Despite thoroughly reviewing my HTML and CSS code, I cannot identify any properties that would impact the margin of the div. When I tried setting the min-height and min-width of the body to 100%, overflow occurred.
Here is the HTML:
<div id="bg">
(content)
</div>
And here is the CSS:
#bg{
background-image: url('bg1.png');
background-size: 100% auto;
margin: 0px 0px
}
body{
background-color: #0000FF;
background-image: url('bg2.png');
background-repeat: repeat;
background-size: 100% auto;
color: white;
}
Edit: I was able to resolve the issue by setting the margin and padding of the body to 0px. I have designed the background in this manner so that they can be animated separately.