No replies
feytus
feytus's picture
Offline
newbie
Last seen: 13 years 6 weeks ago
Joined: 2009-07-01
Posts: 1
Points: 0

Hey there people! I'm designing a website at the moment (http://www.marsmelons.com), and have stumbled upon a problem placing a background image. Basically, I want this image to be to the left along the mid-content section, but a bit further down on the page;

This is how i want it to look;

Now, I want to have a background image on both sides of this content box, but let me just focus on the one on the left at the moment. This is the html code of the document (keep in mind that I am using textpattern as a CMS);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="Music and Arts netlabel" />
        <meta name="keywords" content="marsmelons, mars, melons, records, netlabel, wonky, net, label, music, experimental, dubstep, engelsholm, art, gallery, skumfiduser, sgumfiduser, ganjibiri, nebbb, blaendvaerk, snared, eksperimentell, musikk, gratis, musikk, free, download"/>
	<title><txp:page_title /></title>
 
	<link rel="home" href="<txp:site_url />" />
 
	<txp:feed_link flavor="atom" format="link" label="Atom" />
	<txp:feed_link flavor="rss" format="link" label="RSS" />
 
	<txp:css format="link" />
 
	<txp:rsd />
</head>
<body id="<txp:if_section name="">front<txp:else /><txp:section /></txp:if_section>">
 
<!-- accessibility -->
<div id="accessibility">
	<ul>
		<li><a href="#content"><txp:text item="go_content" /></a></li>
		<li><a href="#sidebar-1"><txp:text item="go_nav" /></a></li>
		<li><a href="#sidebar-2"><txp:text item="go_search" /></a></li>
	</ul>
</div>
 
<div id="container">
 
<!-- left -->
	<div id="sidebar-1">
<img src="<txp:site_url />images/7.jpg" width="313" height="640" alt="---" title="" />
	</div>
 
<!-- right -->
	<div id="sidebar-2">
<img src="<txp:site_url />images/5.jpg" width="150" height="70" alt="---" title="" />
		<txp:section_list default_title='<txp:text item="home" />' include_default="1" wraptag="ul" break="li">
			<txp:if_section name='<txp:section />'>&raquo;</txp:if_section>
			<txp:section link="1" title="1" />
			<txp:if_section name='<txp:section />'>
 
			</txp:if_section>
		</txp:section_list>
		<txp:search_input wraptag="p" />
 
		<p><txp:feed_link label="RSS" /> / <txp:feed_link flavor="atom" label="Atom" /></p>
<img src="<txp:site_url />images/6.jpg" width="150" height="70" align="bottom" alt="---" title="" />
	</div>
 
<!-- center -->
	<div id="content">
<txp:if_category>
		<h2><txp:category title="1" /></h2>
 
		<div class="hfeed">
                <txp:article form="default" />
		<txp:article listform="article_listing" limit="10" />
		</div>
<txp:else />
	<txp:if_search>
		<h2><txp:text item="search_results" />: <txp:page_url type="q" /></h2>
 
		<div class="divider"><img src="<txp:site_url />images/1.gif" width="400" height="1" alt="---" title="" /></div>
	</txp:if_search>
 
		<div class="hfeed">
		<txp:article limit="5" />
		</div>
</txp:if_category>
 
 
<txp:if_individual_article>
		<div class="divider"><img src="<txp:site_url />images/1.gif" width="400" height="1" alt="---" title="" /></div>
 
		<p><txp:link_to_prev>&#171; <txp:prev_title /></txp:link_to_prev> 
			<txp:link_to_next><txp:next_title /> &#187;</txp:link_to_next></p>
<txp:else />
		<p><txp:older>&#171; <txp:text item="older" /></txp:older> 
			<txp:newer><txp:text item="newer" /> &#187;</txp:newer></p>
</txp:if_individual_article>
	</div>
 
<!-- footer -->
	<div id="foot">&nbsp;</div>
 
 
</div>
 
</body>
</html>

And this is the CSS;

body
{
	margin: 0;
	padding: 0;
	font-family: Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif;
	color: #000;
        background-color: #fbf1a8;
        background-image:url('http://www.marsmelons.com/images/122.jpg');
        background-attachment:fixed;
        z-index: -1;
 
 
}
 
blockquote, h3, p, li
{
	padding-right: 10px;
	padding-left: 10px;
	font-size: 0.720em;
	line-height: 1.5em;
}
 
blockquote
{
	margin-right: 0;
	margin-left: 20px;
}
 
h1, h2, h3
{
	margin: 0 0 15px 0;
	padding: 0 10px;
	font-weight: normal;
}
 
h1, h2
{
	font-family: Georgia, Times, serif;
}
 
h1
{
	font-size: 1.4em;
        line-height: 5px;
}
 
h2
{
	font-size: 1em;
	font-style: italic;
}
 
hr
{
	margin: 2em auto;
	width: 370px;
	height: 1px;
	color: #7a7e7d;
	background-color: #7a7e7d;
	border: none;
}
 
small, .small
{
	font-size: 1em;
}
 
a
{
	text-decoration: none;
        color: #000;
        border-bottom: 1px #000 solid;
}
 
a img
{
	border: none;
        display: block;
}
 
h1 a, h2 a, h3 a
{
	border: none;
        color: #000;
 
}
 
h3 a
{
	font: 1.5em Georgia, Times, serif;
 
}
 
#site-name a
{
	border: none;
}
 
#sidebar-2 a, #sidebar-1 a
{
	color: #000;
	border: none;
}
 
#accessibility
{
	position: absolute;
	top: -10000px;
}
 
#container
{
	margin: 0px auto;
	padding-padding: 10px;
	width: 100%;
        height: 2000px;
        overflow: hidden;
	horizontal-allign: left; 
	\width: 770px;
	w\idth: 760px;
}
 
#head
{
	text-align: center;
}
 
#sidebar-1
{
	margin-right: 5px;
	margin-left: 0px;
	float: left;
	text-align: right;
	width: 313px;
	padding: 0px;
	border: 0px solid gray;
	position: absolute;
	left: 0px;
	top: 0px;
        height: 2000px;
        background-image: url('http://www.marsmelons.com/images/144.gif');
        background-repeat: no-repeat;
        background-attachment:fixed;
        background-position: 0px 650px;
        z-index: 1;
}
 
#sidebar-2
{
	margin-left: 10px;
	float: right;
	position: absolute;
	left: 819px;
	background-color: #bebe8a;
	padding: 8px;
	top: 0px;
	border-style: solid;
	border-color: #ffffff;
        background-image: url('http://www.marsmelons.com/images/143.gif');
        background-repeat: no-repeat;
        background-attachment:fixed;
        background-position: 0px 585px;
 
}
 
.section_list
{
	margin: 0 0 10px 0;
	padding: 0;
	list-style-type: none;
}
 
.section_list ul
{
	list-style-type: none;
}
 
.section_list li
{
	margin: 0 10px 2px 0;
	padding: 0;
}
 
#content
{
	margin: 0px;
	padding-top: 30px;
        padding-right: 15px;
	width: 501px;
	position: absolute;
	left: 313px;
        background-color: #fbf1a8;
}
 
#foot
{
	margin-top: 15px;
	clear: both;
	text-align: center;
}
 
#sidebar-1, #sidebar-2
{
	\width: 150px;
	w\idth: 150px;
}
 
#sidebar-2 p, #sidebar-1 p
{
	font-size: 0.8em;
	line-height: 1.5em;
}
 
.caps
{
	font-size: 0.9em;
	letter-spacing: 0.1em;
}
 
div.divider
{
	margin: 2em 0;
	text-align: center;
}
 
.directory
{
	list-style-type: circle;
}
 
.author
{
	font-style: normal;
	font-size: 0.75em;
        padding-left: 10px;
}
 
.published
{
	font-size: 0.8em;
}
 
 
.padding-left
 
 {
 
  padding-left: 3em
 
}
 
.right
 
 {
 
  text-align: right;
  padding-left: 15px;
 
}
 
.padding-right
 
 {
 
  padding-right: 2em
 
}
 
.padding-top
 
 {
 
  margin-top: 5px
 
}
 
.margin-right
 
 {
 
  margin-right: 5px
 
}
 
.comments_error
{
	color: #000;
	background-color: #fff4f4;
}
 
.comments-wrapper
{
font-size: 0.710em;
padding-left: 10px;
} 
 
 
input
{
color: #000;
background: #fee3ad;
border: 1px solid #b8a968
}
 
.submit input
{
color: #000;
background: #ffa20f;
border: 1px #b8a968
} 
 
 
textarea{
width: 250px;
height: 150px;
color: #000;
background: #fee3ad;
border: 1px solid #b8a968
}
 
ul.comments_error
{
	padding: 0.3em;
	list-style-type: circle;
	list-style-position: inside;
	border: 2px solid #fdd;
}
 
div#cpreview
{
	color: #000;
	background-color: #f1f1f1;
	border: 2px solid #ddd;
}
 
form#txpCommentInputForm td
{
	vertical-align: top;
}
 
#comments-help
{
	margin: 2px 0 15px 0;
	font-size: 0.7em;
}
 
.error-status
{
	font: 1.3em Georgia, Times, serif;
}
 
.player
 
leftbgcolor: #f0dd74; 
slidercolor: #c6b67a; 
trackcolor: #dec66c; 
rightbghovercolor:"#c6b877; 
lefticoncolor: #61453a; 
rightbgcolor: #dec970; 
loadercolor: #ebe2a0; 
bordercolor: #c4b87c; 
bgcolor: #fbf1a9; 
righticoncolor: #fbf1a9;
 
{

As you can see, I've tried extending the height of the sidebar to left, but it doesn't really seem to have any effect, as the background image doesn't show up anyway. I've also thought that there might be a conflict with the body's background image, so I've used the z-index to place the body-bg in the background. This didn't work either.

Do you have any ideas why the background image doesn't show? What have I done wrong in the code?

Probably a stupid question, but I'm relatively new to CSS, and need a few pointers. Smile Any suggestions will be much appreciated! :thumbsup: