background image issues

mindapolis · November 19, 2013

Hi, on http://anothermileministries.net/homeTest.php the background image wants to be behind the mainContent as well. I worked on it last night, took a break and looked at it this morning and I can't figure out why its doing that. I tried moving sidebar1 outside the container div but that didn't help. What I dont understand is sidebar2 's syntax is the same but it doesn't overlap into the mainContent area.

<!DOCTYPE HTML>
<?php
    require_once("functions.php");
?>
    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="lon.css" rel="stylesheet" type="text/css">
<style type="text/css">
html, body, .container, .sidebar1, .sidebar1 img, .sidebar2, .sidebar2 img   { 
	height: 100%; 
}
.sidebar2 {
	Overflow:  hidden; 
}
article {
    margin-left: auto;
    margin-right:auto;
    width:600px;
    padding-top:  20px;
    padding-bottom:20px;
}
</style>
</head>

<body>
  <div class="container">
    <div class="sidebar1">
    <img src="assets/road.jpg" alt="road" />

<!-- end .sidebar1 --></div>
  <div class="content">
    <?php headerMenu(); ?>

     </header>
    <div id="mainContent">
    <article>
<video width="640" height="360" controls>

    <source src="assets/barbie.mp4" type="video/mp4" autoplay>
    <source src="assets/barbie.ogv" type="video/ogg" autoplay>
  <object type="application/x-shockwave-flash" data="/mov/player.swf"  
width="320" height="240">  
        <source src="assets/._barbie.mp4" type="video/mp4">
    <param name="allowfullscreen" value="true">  
    <param name="allowscriptaccess" value="always">  
    <param name="flashvars" value="file=/mov/scene.mp4">  
    <!--[if IE]><param name="movie" value="/mov/player.swf"><![endif]-->  
    <img src="/img/scene-preview.jpg" width="320" height="240" alt="Video">  
    <p>Sorry but your browser doesn't support HTML5 video.</p>  
  </object>  
</video>
</article>
     </div>
    <!-- end .content --></div>
    <div class="sidebar2">
    <img src="assets/road.jpg" alt="road" />
<!-- end .sidebar2 --></div>
    <footer>
    </footer>
<!-- end .container --></div>
</body>  
</html>

/*@charset "utf-8";
 CSS Document */
html, body { 
	margin:0;
	height: 100%;
}
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 100%;/*original width 80%;
	max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	background: #FFF;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */

.sidebar1 {
	float: left;
	height:100%;
	width: 15%;
	background-image: url(assets/road.jpg);
	background-repeat: no-repeat;
	background-attachment:fixed;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #F6C;
	border-right-color: #F6C;
	border-bottom-color: #F6C;
	border-left-color: #F6C;
}
.content {
	padding: 10px 0;
	width: 60%;
	float: left;
}
nav {
	background-color: #B1977C;
	width: 200px;
	margin-left:auto;
	margin-right:auto;
 }

.sidebar2 {
	float: right;
	height:100%;   
	width: 15%;
	background-image: url(assets/road.jpg);
	background-repeat: no-repeat;
	background-attachment:fixed;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
}
header {
	background-color: #735435;
	width: 110%;
}

/* ~~The footer ~~ */
.footer {
	padding: 10px 0;
	background: #6F7D94;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
#photos {
	margin-right:auto;
	margin-left:auto;
	width:400px;
	padding:5px;
}
#mainContent {
	background-color: #e6dace;
	height: 100%;
	width: 110%;
	margin-left:auto; 
	margin-right:auto; 
}

Sign In

background image issues

Recommended Posts

mindapolis

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information