homepage Welcome to WebmasterWorld Guest from 54.196.203.41
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Getting background image to span
xxjojoxx




msg:4370586
 2:52 pm on Oct 4, 2011 (gmt 0)

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




msg:4370625
 4:35 pm on Oct 4, 2011 (gmt 0)

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




msg:4370646
 5:13 pm on Oct 4, 2011 (gmt 0)

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




msg:4370678
 6:23 pm on Oct 4, 2011 (gmt 0)

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




msg:4370727
 8:14 pm on Oct 4, 2011 (gmt 0)

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




msg:4370804
 11:22 pm on Oct 4, 2011 (gmt 0)

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




msg:4371078
 3:22 pm on Oct 5, 2011 (gmt 0)

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




msg:4371127
 4:25 pm on Oct 5, 2011 (gmt 0)

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




msg:4377698
 4:04 pm on Oct 21, 2011 (gmt 0)

Penders, thank you for all of your help!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved