My struggle is with setting a background image to 100% width, as the image ends up getting cut off on half of the screen. The picture becomes wider than my display area. How can I resolve this issue so that the image width adjusts to fit the screen without being cropped? You can check out my Tumblr page to see the problem firsthand () and view the full image here to understand where it's cutoff ().
Below is my code: In the CSS Section:
/* --- HEADER --- */
#header {
top: 0;
left: 0;
width: 100%;
{block:IfAdjustableHeader}height:{text:Header Height};{/block:IfAdjustableHeader}
{block:IfNotAdjustableHeader}height:100%;{/block:IfNotAdjustableHeader}
position: fixed;
z-index: 10;
background-image: url('{image:header}');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* --- PAGE CONTENT --- */
#page {
{block:IfAdjustableHeader}top:{text:Header Height};{/block:IfAdjustableHeader}
{block:IfNotAdjustableHeader}top:100%;{/block:IfNotAdjustableHeader}
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
background: {color:Background};
z-index: 99;
}
.container {
margin: 50px auto 0px;
{block:If400Posts}width: 800px;{/block:If400Posts}
{block:If500Posts}width: 900px;{/block:If500Posts}
}
/* --- POSTS --- */
.postcol {
width: 540px;
margin-left: 240px;
}
.posts {
margin-bottom: 20px;
background-color: #fff;
padding: 20px;
}
.posts img, .posts li, .posts blockquote {
max-width: 100%;
}
HTML Part
<body>
<div id="header">
<div class="description">{Description}</div>
</div>
<div id="page">
<div class="container">
<div class="postcol">
{block:Posts}
<div class="posts">
</div>