I am struggling with writing markup and CSS to prevent a background image from creating a scrollbar unless the viewport is narrower than the inner content wrapper:
The solution provided in this post didn't work for me: Absolutely positioned div on right causing scrollbar when the left doesn't.
One of my failed attempts in a fixed layout:
#background {
width: auto;
margin-left: -75px;
margin-right: -75px;
}
An area extending outside the containing block due to negative margin isn't accessible by scrolling. However, using a negative margin-right creates a scrollbar when the viewport is narrow. How can I avoid the scrollbar as long as the viewport is wider than the containing block?
The markup used:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title> </title>
<link rel="stylesheet" type="text/css" href="css/general.css" media="screen, projection"/>
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/general-ie.css" media="screen"/>
<![endif]-->
</head>
<body>
<div id="page">
<img id="background" src="images/visual.jpg" alt="" />
<div id="head"><h1>Page title</h1></div><!-- /#head -->
<div id="mainpart">
<ul id="zones">
<li>
<ul>
<li class="module">Module #1</li><!-- /#module -->
</ul>
</li>
</ul><!-- /#zones -->
<hr />
</div><!-- /#mainpart -->
<div id="foot"><h1>Footer</h1></div><!-- /#foot -->
</div><!-- /#page -->
</body>
</html>
The CSS rules written:
body {
background: #000;
color: #000;
}
#page, #mainpart {
background: #fff;
}
#page {
width: 1024px;
margin: 0 auto;
position: relative;
}
#background {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: auto;
margin-left: -75px;
margin-right: -75px;
}
If anyone has any helpful advice, please share. Thank you.