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; |
|
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!
|
|
