I’m just wondering if it is possible to set a background colour in a DIV that uses a transparent background gradient png image without the background colour showing through? I only want the background colour to show if the DIV has to expand to fit the content.
So far the background colour is showing through ( in this case making the background a bit brighter) and so the colours aren’t matching between the end of the png and the background colour i’ve set.
Any help is appreciated.
Noone knows everything :). As a wise person once said on these forums, it would take you 1000 years of constant research to know everything about the language. But then it would take you even more time to catch up on what you missed.
What do you want to show through the transparent parts of the background image?
You might be better using a non-transparent background, or a background that is big enough to cope with expanding content.
Do you want to post a link to the page so we can see what’s going on?
Sorted it, decided to just stick with a background colour alone for the DIV’s that will expand.
I have a new problem where the footer is overlapping the content. Here is a link http://sds.hostzi.com/wordpress/about-us/
and the css code:
@import url('reset.css');
body {
background-color: #22538b;
font-family: sans-serif;
font-size: 1em;
line-height: 18px;
color: #FFFFFF;
min-width: 1020px;
}
a, a:visited {
color: #FFFFFF;
text-decoration: underline;
}
a:hover, a:active {
color: #FFFFFF;
text-decoration: none;
}
.border {
position: relative;
min-width: 1020px;
width: 100%;
height: 29px;
background-image: url('images/border_top.jpg');
background-repeat: repeat-x;
}
#wrapper {
width: 1020px;
min-height: 1000px;
height: 100%
background-image: url('images/bg.jpg');
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
position: relative;
}
/*Header DIV*/
#header {
width: 100%;
}
#search {
height: 35px;
background-image: url('images/magnifying.png');
background-repeat: no-repeat;
position: absolute;
top: 30px;
right: 30px;
}
input#searchBox {
margin-top: 10px;
margin-left: 35px;
background-image: url('images/search_bg.png');
background-repeat: repeat-x;
border-top: 2px solid #1e4169;
border-left: 2px solid #1e4169;
border-bottom: 1px solid #234c7a;
border-right: 2px solid #234c7a;
font-family: Nobile;
font-size: 1em;
color: #FFFFFF;
}
input#searchSubmit {
}
#title, #content, #contentAbout, #sidebar { /* Main properties for these ID's */
position: relative;
top: 150px;
width: 100%;
min-height: 300px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-top: 1px solid #2a64a4;
border-left: 1px solid #2a64a4;
border-bottom: 1px solid #235082;
border-right: 1px solid #235082;
background-image: url('images/content_bg.png');
background-repeat: repeat-x;
}
img#logo {
position: absolute;
top: 50px;
left: 30px;
}
img#slogan {
position: absolute;
top: 50px;
right: 150px;
}
ul#nav {
position: absolute;
bottom: 85px;
left: 30px;
}
ul#subNav {
position: absolute;
bottom: 50px;
left: 40px;
color: #CCCCCC;
}
li.page_item, li.page_item a {
display: inline;
font-size: 1em;
padding-right: 10px;
}
/*Sub Nav Items*/
li.page-item-26 a, li.page-item-28 a, li.page-item-30 a, a.sidebarLink { /*Sub Nav & Sidebar Links*/
color: #CCCCCC;
text-decoration: none;
font-size: 0.875em;
}
li.page-item-26 a:hover, li.page-item-28 a:hover, li.page-item-30 a:hover, a.sidebarLink:hover { /*Sub Nav and Sidebar Links*/
text-decoration: underline;
}
/* End Header DIV */
/* Content DIV */
#content {
top: 300px;
}
li#contentBox, li.contentBoxM {
margin-left: 5px;
float: left;
display: inline;
}
li.contentBoxM {
margin-left: 30px;
}
img#clearanceIco {
padding: 5px 5px 0px 5px;
float: left;
}
img#refuseIco {
padding: 5px 5px 0px 5px;
float: left;
}
h3.contentTitle {
padding-top: 15px;
padding-left: 10px;
}
p.contentText {
padding-top: 15px;
padding-left: 10px;
margin: 0;
width: 300px;
}
a.contentLink:link, a.contentLink:active, a.contentLink:visited {
color: #214871;
font-size: 1.25em;
text-decoration: none;
}
a.contentLink:hover {
text-decoration: underline;
}
img#separatorLeft {
position: absolute;
left: 332px;
}
img#separatorRight {
position: absolute;
right: 342px;
}
/* About Page: Sidebar and Content
Sidebar DIV
PLEASE NOTE: Nothing to do with Wordpress sidebar */
#sidebar {
background-image: none;
background-color: #265a93;
position: relative;
float: left;
width: 190px;
margin-top: 150px;
}
#contentAbout {
background-image: none;
background-color: #265a93;
position: relative;
float: right;
clear: right;
width: 80%;
margin-top: 150px;
}
ul.sidebar {
margin: 20px 0 20px 45px;
}
ul.sidebar li a { /* Sidebar links */
font-style: italic;
}
ul.sidebar ul li a { /* Sidebar Sub-links */
margin-left: 5px;
}
h3.sidebar {
width: 100%;
margin-top: 20px;
text-align: center;
text-decoration: underline;
font-weight: 500;
font-style: italic;
}
p.aboutContent {
width: 96%;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
/*Footer DIV*/
#footer {
position: relative;
width: 100%;
min-height: 300px;
background-image: url('images/footer_bg.png');
background-repeat: repeat-x;
border-top: solid 1px #143c6a;
}
Hi, first of all, you have invalid CSS throughout your file
#wrapper {
width: 1020px;
min-height: 1000px;
[B] height: 100%[/B]
background-image: url('images/bg.jpg');
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
position: relative;
}
It’ll restrict the wrapper to 100% height, thus the footer overlapping
Also, #wrapper needs some sort of clearing mechanism, like the clearfix or overflow:hidden addeed to it
Thank you, I now have it doing what I want.
…seems I have a lot more to learn about CSS 
Hi,
You have the clearfix in the wrong place. It should be added to the parent that contains the floats and will make sure the parent contains its child floats. It will not make the element steer clear of floats above it. It is a containing mechanism.
<div id="wrapper" class="clearfix"> etc....
For elements that you want to clear floated elements then just add clear:both to them.
You need to remove the xml declaration that is above the doctype because it will cause IE6 to go into quirks mode and use the broken box model.
The root of your problem is your misuse of position:relative to move things around. Position:relative doesn’t actually move anything physically but moves it visually only which means that it will overlap element like your footer because in fact the element always occupies its original position in the flow. Everything on the page thinks the relative element is where it always was.
Don’t use relative positioning unless you understand this and in most cases you won’t need to use it. Margins will do nicely once you understand how collapsing margins work 
I’ve tidied the code up a little to get it in working order but it could do with a lot more love and attention.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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="generator" content="Wordpress 3.0.1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SDS – Stewart Domestic Services » About Us</title>
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1.2;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
Theme Name: SDS Theme
Them URI: http://localhost/wordpress/
Description: 'The SDS Website theme'
Author: Stephen Stewart
Author URI: http://localhost/
*/
@font-face {
font-family: Nobile;
}
@font-face {
font-family: Quicksand;
src: url('http://sds.hostzi.com/wordpress/wp-content/themes/sds/images/Quicksand_Light.otf');
}
body {
background-color: #22538b;
font-family: sans-serif;
font-size: 1em;
line-height: 18px;
color: #FFFFFF;
min-width: 1020px;
}
a, a:visited {
color: #FFFFFF;
text-decoration: underline;
}
a:hover, a:active {
color: #FFFFFF;
text-decoration: none;
}
div.border {
position: relative;
min-width: 1020px;
width: 100%;
height: 29px;
background-image: url('http://sds.hostzi.com/wordpress/wp-content/themes/sds/images/border_top.jpg');
background-repeat: repeat-x;
}
p#tagline {
float: left;
color: #cccccc;
font-size: 0.84em;
line-height: 30px;
margin-left: 5px;
}
div#crumbs, div#crumbs span.current, div#crumbs a {
display: inline;
color: #cccccc;
font-size: 0.875em;
text-decoration: none;
line-height: 30px;
margin-left: 2px;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix {
zoom: 1;
} /* IE6 */
*:first-child+html .clearfix {
zoom: 1;
} /* IE7 */
div#wrapper {
width: 1020px;
background-image: url('http://sds.hostzi.com/wordpress/wp-content/themes/sds/images/bg.jpg');
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
position: relative;
padding:1px 0 10px;
}
/*Header DIV*/
div#search {
height: 35px;
background-image: url('http://sds.hostzi.com/wordpress/wp-content/themes/sds/images/magnifying.png');
background-repeat: no-repeat;
position: absolute;
top: 30px;
right: 30px;
}
input#searchBox {
margin-top: 10px;
margin-left: 35px;
background-image: url('http://sds.hostzi.com/wordpress/wp-content/themes/sds/images/search_bg.png');
background-repeat: repeat-x;
border-top: 2px solid #1e4169;
border-left: 2px solid #1e4169;
border-bottom: 1px solid #234c7a;
border-right: 2px solid #234c7a;
font-family: Nobile;
font-size: 1em;
color: #FFFFFF;
}
input#searchSubmit {
}
div#title, div#content, div#contentAbout, div#sidebar { /* Main properties for these ID's */
/*position: relative;
top: 150px;*/
width: 100%;
min-height: 300px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-top: 1px solid #2a64a4;
border-left: 1px solid #2a64a4;
border-bottom: 1px solid #235082;
border-right: 1px solid #235082;
background-image: url('http://sds.hostzi.com/wordpress/wp-content/themes/sds/images/content_bg.png');
background-repeat: repeat-x;
margin-top:150px;
position:relative;
padding:1px 0;
}
* html div#title,* html div#content, div#contentAbout,* html div#sidebar{height:300px}
img#logo {
position: absolute;
top: 50px;
left: 30px;
}
img#slogan {
position: absolute;
top: 50px;
right: 150px;
}
.menu {
position: absolute;
bottom: 85px;
left: 30px;
}
ul#subNav {
position: absolute;
bottom: 50px;
left: 40px;
color: #CCCCCC;
}
li.page_item, li.page_item a {
display: inline;
font-size: 1em;
padding-right: 10px;
}
/*Sub Nav Items*/
li.page-item-26 a, li.page-item-28 a, li.page-item-30 a, a.sidebarLink { /*Sub Nav & Sidebar Links*/
color: #CCCCCC;
text-decoration: none;
font-size: 0.875em;
}
li.page-item-26 a:hover, li.page-item-28 a:hover, li.page-item-30 a:hover, a.sidebarLink:hover { /*Sub Nav and Sidebar Links*/
text-decoration: underline;
}
/* End Header DIV */
/* Content DIV */
div#content {
top: 300px;
}
li#contentBox, li.contentBoxM {
margin-left: 5px;
float: left;
display: inline;
}
li.contentBoxM {
margin-left: 30px;
}
img#clearanceIco {
padding: 5px 5px 0px 5px;
float: left;
}
img#refuseIco {
padding: 5px 5px 0px 5px;
float: left;
}
h3.contentTitle {
padding-top: 15px;
padding-left: 10px;
}
p.contentText {
padding-top: 15px;
padding-left: 10px;
margin: 0;
width: 300px;
}
a.contentLink:link, a.contentLink:active, a.contentLink:visited {
color: #214871;
font-size: 1.25em;
text-decoration: none;
}
a.contentLink:hover {
text-decoration: underline;
}
img#separatorLeft {
position: absolute;
left: 332px;
}
img#separatorRight {
position: absolute;
right: 342px;
}
/* About Page: Sidebar and Content
Sidebar DIV
PLEASE NOTE: Nothing to do with Wordpress sidebar */
div#sidebar {
background-image: none;
background-color: #265a93;
float: left;
width: 190px;
margin-top: 50px;
}
div#contentAbout {
background-image: none;
background-color: #265a93;
float: right;
clear: right;
width: 80%;
margin-top: 50px;
}
ul.sidebar {
margin: 20px 0 20px 45px;
}
ul.sidebar li a { /* Sidebar links */
font-style: italic;
}
ul.sidebar ul li a { /* Sidebar Sub-links */
margin-left: 5px;
}
h3.sidebar {
width: 100%;
margin-top: 20px;
text-align: center;
text-decoration: underline;
font-weight: 500;
font-style: italic;
}
div#contentAbout p {
width: 96%;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
/*Footer DIV*/
div#footer {
position: relative;
min-height: 300px;
background-image: url('http://sds.hostzi.com/wordpress/wp-content/themes/sds/images/footer_bg.png');
background-repeat: repeat-x;
border-top: solid 1px #143c6a;
clear:both;
}
* html #footer{height:300px}
.recentcomments a {
display:inline !important;
padding:0 !important;
margin:0 !important;
}
</style>
</head>
<body class="page page-id-34 page-template page-template-about-php">
<div class="border">
<p id="tagline">SDS - House Clearance and Refuse Uplift Specialists : <span id="crumbs"><a href="http://sds.hostzi.com/wordpress">Home</a> » <span class="current">About Us</span></span> </p>
</div>
<div id="wrapper" class="clearfix">
<div id="header">
<div id="search">
<form method="get" action="http://sds.hostzi.com/wordpress">
<div>
<input type="text" id="searchBox" name="s" value="" />
<input type="submit" value="search" id="searchSubmit" />
</div>
</form>
</div>
<!-- Search DIV -->
<div id="title">
<h1><a href="http://sds.hostzi.com/wordpress"><img src="http://sds.hostzi.com/wordpress/wp-content/themes/sds/images/logo.png" id="logo" alt="SDS - Stewart Domestic Services - House Clearance and Refuse Uplift Specialists" title="SDS - Stewart Domestic Services - House Clearance and Refuse Uplift Specialists" /></a> <img src="http://sds.hostzi.com/wordpress/wp-content/themes/sds/images/slogan.png" id="slogan" alt="Specialising in house clearances and refuse uplifts" title="Specialising in house clearances and refuse uplifts" /></h1>
<ul class="menu">
<li class="page_item page-item-7"><a href="http://sds.hostzi.com/wordpress/" title="Home">Home</a></li>
<li class="page_item page-item-34 current_page_item"><a href="http://sds.hostzi.com/wordpress/about-us/" title="About Us">About Us</a></li>
<li class="page_item page-item-13"><a href="http://sds.hostzi.com/wordpress/what-we-do/" title="What We Do">What We Do</a></li>
<li class="page_item page-item-15"><a href="http://sds.hostzi.com/wordpress/contact-us/" title="Contact Us">Contact Us</a></li>
</ul>
</div>
</div>
<!-- Title DIV -->
<!-- Header DIV -->
<div id="sidebar">
<h3 class="sidebar">Sidebar Title</h3>
<ul class="sidebar">
<li><a class="sidebarLink" href="#">Link 1</a>
<ul>
<li><a class="sidebarLink" href="#">Sub Link 1</a></li>
<li><a class="sidebarLink" href="#">Sub Link 2</a></li>
</ul>
</li>
<li><a class="sidebarLink" href="#">Link 2</a></li>
</ul>
</div>
<div id="contentAbout">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit, turpis non condimentum dictum, leo mi lobortis turpis, id feugiat justo nisl et magna. Maecenas semper blandit ligula vel semper. Nullam egestas dignissim ultrices. Curabitur ut nunc felis, et scelerisque leo. Suspendisse non laoreet ligula. Donec in ipsum mattis sapien hendrerit sagittis. Quisque massa lorem, feugiat volutpat faucibus et, rutrum vitae augue. Nulla accumsan suscipit erat, in fringilla eros convallis sed. Cras eu elit odio, at ultricies neque.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit, turpis non condimentum dictum, leo mi lobortis turpis, id feugiat justo nisl et magna.</p>
<p>Maecenas semper blandit ligula vel semper. Nullam egestas dignissim ultrices. Curabitur ut nunc felis, et scelerisque leo. Suspendisse non laoreet ligula. Donec in ipsum mattis sapien hendrerit sagittis. Quisque massa lorem, feugiat volutpat faucibus et, rutrum vitae augue. Nulla accumsan suscipit erat, in fringilla eros convallis sed. Cras eu elit odio, at ultricies neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit, turpis non condimentum dictum, leo mi lobortis turpis, id feugiat justo nisl et magna. Maecenas semper blandit ligula vel semper. Nullam egestas dignissim ultrices. Curabitur ut nunc felis, et scelerisque leo. Suspendisse non laoreet ligula. Donec in ipsum mattis sapien hendrerit sagittis. Quisque massa lorem, feugiat volutpat faucibus et, rutrum vitae augue. Nulla accumsan suscipit erat, in fringilla eros convallis sed. Cras eu elit odio, at ultricies neque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit, turpis non condimentum dictum, leo mi lobortis turpis, id feugiat justo nisl et magna. Maecenas semper blandit ligula vel semper. Nullam egestas dignissim ultrices. Curabitur ut nunc felis, et scelerisque leo. Suspendisse non laoreet ligula. Donec in ipsum mattis sapien hendrerit sagittis. Quisque massa lorem, feugiat volutpat faucibus et, rutrum vitae augue. Nulla accumsan suscipit erat, in fringilla eros convallis sed. Cras eu elit odio, at ultricies neque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit, turpis non condimentum dictum, leo mi lobortis turpis, id feugiat justo nisl et magna. Maecenas semper blandit ligula vel semper. Nullam egestas dignissim ultrices. Curabitur ut nunc felis, et scelerisque leo. Suspendisse non laoreet ligula. Donec in ipsum mattis sapien hendrerit sagittis. Quisque massa lorem, feugiat volutpat faucibus et, rutrum vitae augue. Nulla accumsan suscipit erat, in fringilla eros convallis sed. Cras eu elit odio, at ultricies neque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit, turpis non condimentum dictum, leo mi lobortis turpis, id feugiat justo nisl et magna. Maecenas semper blandit ligula vel semper. Nullam egestas dignissim ultrices. Curabitur ut nunc felis, et scelerisque leo. Suspendisse non laoreet ligula. Donec in ipsum mattis sapien hendrerit sagittis. Quisque massa lorem, feugiat volutpat faucibus et, rutrum vitae augue. Nulla accumsan suscipit erat, in fringilla eros convallis sed. Cras eu elit odio, at ultricies neque.</p>
</div>
</div>
<!-- Wrapper DIV -->
<div id="footer"> </div>
<!-- Footer DIV -->
<div class="border"></div>
</body>
</html>
hmmm. I used the clearfix method but it isn’t clearing it fully