Getting background image to span

[xxjojoxx]

Hello forum. I managed to view some of the threads here and they are quite informative.

I'm looking to make a minor change to my pages.
Please see the pic below:

I want the gray background image to span across the rest of the page (behind the photos). [i33.photobucket.com ]

Here is my code. I appreciate any assistance. Thanks!

*
{
padding: 0;
margin: 0;
}
img
{
padding: 0;
margin: 0;
border: 0;
}
body
{
font-family: arial
font-size: 10px;
background: #001b50;
}
a, a:visited, a:active
{
color: #484848;
text-decoration: none;
}
a:hover
{
color: #009CD5;
text-decoration: none;
}
#wrapper
{
margin: 0 auto;
background: #FFF;
border: 1px solid #FFF;
width: 850px;
}
#nav
{
margin: 0 auto;
padding: 0px;
text-align: center;
}
#nav ul.menu
{
width: 800px;
}
#nav ul.menu li, a
{
color: #484848;
list-style: none;
display: inline;
padding: 1px;
font-family: arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
#nav ul.menu a:hover
{
color: #009CD5;
list-style: none;
display: inline;
padding: 1px;
font-family: arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
#content_container
{
padding: 20;
margin: 0;
width: 807px;
color: #484848;
font-family: arial;
font-size: 12px;
}
#content_container_table, td
{
padding: 20;
margin: 0;
width: 700px;
color: #484848;
font-family: arial;
font-size: 16px;
}
#content_form
{
background-image: url(http://www.test.com/growthconf2012/include/images/gradient.jpg);
background-repeat:repeat-x;
background-position: top left;
color: #484848;
font-family: arial;
font-size: 16px;
padding: 10px;
width: 850px;
}
#content
{
background-image: url(http://www.test.com/growthconf2012/include/images/gradient.jpg);
background-repeat: no-repeat;
background-position: top left;
color: #484848;
font-family: arial;
font-size: 12px;
padding: 10px;
width: 460px;
}
#content ul
{
padding-left:2em;
}

[penders]

You are currently applying the background-image to #content_form and #content. It looks like you need to apply this background-image to a parent container instead. Depending on the structure of your HTML, this could be #content_container or possibly #wrapper?

[xxjojoxx]

Hello Penders. Thanks for your response.

If I place the background-image in a parent container, is this going to expand the background to the left and right of the header? I do not want this to happen.

This is a mockup of what I'm trying to do..
[i33.photobucket.com ]

How can I determine which one is the parent container?

Thanks Penders!

[penders]

If I place the background-image in a parent container, is this going to expand the background to the left and right of the header? I do not want this to happen.

It might, but it depends on the CSS/HTML. You can always try it and see. Without seeing the HTML I can only guess that the appropriate parent container might be #content_container. This sets "padding: 20; margin: 0;" (I assume that should be 20px?) - so I would guess that the background-image might stretch to the left and right of the content area (which I believe is undesirable?), but not the header (assuming the #content_container starts below the header, but may be this encompasses the header as well?). You might need to switch the padding/margin around, since the background does not appear in the margin, only in the padding.

Something like...

padding: 20px 0; 
margin: 0 20px;

To keep the top/bottom padding of 20px and reduce the left/right padding to 0. And keep the top/bottom margin at 0, but give it 20px left/right margin.

If that fails you might need to add an additional (inner) container specifically for the background?

[xxjojoxx]

Penders I added the background image to the #content_container. You are a savior. This is what I wanted to do!

My last question is how can I have the text and images start about 30 pixels down (this way I have some open space from the navigation bar?
Thank you kindly. I sincerely appreciate your time and assistance.

[i33.photobucket.com ]

This is the code within #content

#content_container
 {
 background-image: url(http://www.test.com/growthconf2012/include/images/gradient.jpg);
 background-repeat:repeat-x;
 background-position: top left;
padding: 10; 
 margin: 0; 
 width: 807px;
 color: #484848;
 font-family: arial;
 font-size: 12px; 
 }
#content_container_table, td
 {
padding: 10; 
 margin: 0; 
 width: 700px;
 color: #484848;
 font-family: arial;
 font-size: 16px; 
 } 

[penders]

Do you wish to see your background-image in this 'open space'? Or just white-space?

If you wish to see the background-image then change

padding: 10;

on #content_container to...

padding: 30px 10px 10px 10px;

(Assuming this should be px .... top right bottom left)

Or for white-space then change

margin: 0;

to...

margin: 30px 0 0 0;

[xxjojoxx]

I would like to see the background image in the open space so I followed your guide and nothing happened.

Here is the code..

#content_container
  {
  background-image: url(http://www.maximgrp.com/growthconf2012/include/images/gradient.jpg);
  background-repeat:repeat-x;
  background-position: top left;
padding: 30px 10px 10px 10px; 
 margin: 0px; 
  width: 807px;
  color: #484848;
  font-family: arial;
  font-size: 12px;  
  }
#content_container_table, td
  {
padding: 10; 
  margin: 0; 
  width: 700px;
  color: #484848;
  font-family: arial;
  font-size: 16px;  
  } 

[penders]

Well, it is a bit of guess work without seeing the HTML, if you change the padding, does it make any difference?

padding: 40px 10px 10px 10px;

margin: 0px;

Minor point, you don't need to specify the unit (px, em, pt, etc..) when the value is 0, since 0 anything is 0.

[xxjojoxx]

Penders, thank you for all of your help!