Background Image Positioning from the CSS file

[Angrypoonani]

What I'm trying to do is position my background image with css so it looks as if the bottom of my pageContent has torn paper for a border.

Is there any way to further position the image after I've defined the position as 'bottom center'. I need the bottom border of every page to be the torn paper image.

HTML:

Code:
<div id="content-middle" style="height: 682px;">
<div id="pageContent" class="container">
<div> </div>
<h2 class="titleHeader"> Products </h2>
<div class="pageNote">
<p>
<input height="128" width="730" type="image" src="header image" longdesc="undefined">
</p>
<div style="font-size: 25px; padding-left: 15px;">
<img class="disp1" alt="Sea of Copiers" src="description image" style="">
<div>
<a class="hlink1" href="">Multifunctional Printers/Copiers</a>
</div>
<br>
<div>
<a class="hlink1" href="">Facsimile</a>
</div>
<br>
<div>
<a class="hlink1" href="">Printers</a>
</div>
<br>
<div>
<a class="hlink1" href="">Large Format Printers</a>
</div>
<br>
<div>
<a class="hlink1" href="">Scanners</a>
</div>
</div>
</div>
</div>
</div>

CSS:

#pageContent{
    width: 749px;
    border: 1px solid #000000;
    border-right: 0px;
    -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
    box-shadow: 5px 5px 5px rgba(0,0,0,0.6);
    background-image: url("torn paper image");
    background-repeat: no-repeat;
    background-position: bottom center;
    margin: 0 auto;
    padding-bottom: 6px;
}

[Paul O'B]

Hi,

You can't make a background image stretch outside the border of the element. Either remove the bottom border or add another element underneath just to hold the torn image.

On another matter don't use breaks wjust to make space as that is wasteful and unnecessary. Just add a bottom margin to the div instead.

e.g. Don't do this:

<div> <a class="hlink1" href="">Facsimile</a> </div>
 <br>

It looks as those sequence of elements should be list element anyway.

[Angrypoonani]

You can't make a background image stretch outside the border of the element. Either remove the bottom border or add another element underneath just to hold the torn image.

Thank you for your help, I was able to accomplish what I needed to do with your suggestion. But I found it was better to just use an image instead of a background and then position it (it was more work for me but oh well). It's cumbersome that I can't link an image through css though...

On another matter don't use breaks wjust to make space as that is wasteful and unnecessary. Just add a bottom margin to the div instead.

e.g. Don't do this:

<div> <a class="hlink1" href="">Facsimile</a> </div>
 <br>

It looks as those sequence of elements should be list element anyway.

What about spacing within a div element itself? Would I then use the <br /> tags to create my desired spacing or should I wrap my individual content that I want separated in <p></p> tags?

Example:

<h1 style="">Physical Address:</h1>
<div style="">123 Fake Street<br />
Fake City, FS 11111<br />
<br />
(111) 111-1111</div>

[Paul O'B]

What about spacing within a div element itself? Would I then use the <br /> tags to create my desired spacing or should I wrap my individual content that I want separated in <p></p> tags?

Example:

<h1 style="">Physical Address:</h1>
<div style="">123 Fake Street<br />
Fake City, FS 11111<br />
<br />
(111) 111-1111</div>

It's all about using the appropriate element for the job in hand. A break is to create a line-break between words such as you would have in a poem or an address or between form controls.

Breaks are not meant for making space between paragraphs because that's what the p element is for and you can adjust the margin to suit Neither are they used for making space between other block elements.

You can use breaks for lines in an address though but again the address should probably be in an address element if it is the contact details for the site and not some arbitrary address.

In most sites there will actually be very few breaks needed at all.