Background display problem in div

Question

Hi everyone,
I have a two column fixed with header and footer page. In the
body section I put in two div containers for the different sections
of text that I wanted to have. I put in a background image for the
div but when I view it the bottom of the background image is being
cut off. Can anyone help me with this problem so that I can get the
image to show completely.
Thanks,
Robert

Answer 1

Hi Robert,
To make the whole image show as the background, you'll want
to make the
div's height and width the same size as the image.
To avoid any box-model issues (more info:
http://www.quirksmode.org/css/box.html)
you should remove the padding for
that div from the CSS.
You can use margins applied to the <p> tags in that div
to align your text
the way you want.
Assume the image is 300x300 for the example below:
.bodyText1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height:300px;
width:300px;
background-color: #eee9ca;
margin-top: 10px;
background-image: url(../Images/indexbodyimage.gif);
background-repeat: no-repeat;
background-position: top;
.bodyText1 p {margin: 2px 10px;}
The .bodyText p class says "give all <p> tags in the
container .bodyText1 a
top and bottom margin of 2px and a left and right margin of
10px.
I hope that helps.
Take care,
Tim
"ryonker" <[email protected]> wrote in
message
news:fjqndc$8s8$[email protected]..
> Here is the HTML code and the the CSS code will follow.
I hope that this
> is
> what you are looking for. Thanks for any guidance.
>
> HTML CODE:
> <div id="mainContent"><!--
InstanceBeginEditable name="mainContent1" -->
> <div class="bodyText1" id="bodyText1">
> <p class="style3">
For Business Owners</p>
> <p>Understand your target market</p>
> <p>Create or refine your marketing plan</p>
> <p>Drive your plan implementation</p>
> <p><br />
> <br />
> <br />
> Contact us for a free marketing evaluation: <a
>
href="mailto:[email protected]">[email protected]</a></p>
> <p> </p>
> <p> </p>
> </div>
>
> CSS CODE:
> .bodyText1 {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 12px;
> background-color: #eee9ca;
> padding-top: 5px;
> padding-right: 10px;
> padding-bottom: 10px;
> padding-left: 10px;
> margin-top: 10px;
> background-image: url(../Images/indexbodyimage.gif);
> background-repeat: no-repeat;
> background-position: top;
>