I've been struggling to find a solution to this issue for hours, scouring the internet with no success.
The problem I'm facing is trying to center a background image on the page. However, when using the method shown here, it ends up stretching the width of the page, allowing scrolling beyond the page's width.
Below is the code I have:
HTML:
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="bground">d</div>
</div>
</body>
</html>
CSS:
div.container {
position: absolute;
width: 100%;
height: 100%;
left: 50%;
}
div.bground {
position: relative;
width: 100%;
height: 100%;
left: -50%;
background: url('http://cdn.bleedingcool.net/wpcontent/uploads/2015/04/skyrim.jpg') no-repeat center center scroll;
}