add background image to a DIV

[jasonc310771]

wanting to change the background of a DIV not the colour but have an image instead.

is this possible? if so how?

thanks


.container { position:relative; background:#799BD9; margin:0 5px;}
.rtop, .rbottom{ display: block; background:#507BCD; }
.rtop *, .rbottom *{ display: block; height: 1px; overflow: hidden; background:#799BD9; }
.r1{ margin: 0 5px}
.r2{ margin: 0 3px}
.r3{ margin: 0 2px}
.r4{ margin: 0 1px; height: 1px }
h1 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 0; padding: 5; }
a.two:link { color: #000; }
a.two:visited { color: #000; }
a.two:hover { color: #fff; }
a.two:active { color: #000; }
a.two { text-decoration: none; }



<div class="container">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<a class="two" href="?v=4047" target="_blank"><h1>oh..me.</h1></a>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>

[Gilligan]

The background of .container?

.container { position:relative; background:#799BD9; margin:0 5px;}

change that to this:

.container { position:relative; background-image: url(image url or path); margin:0 5px;}

[jasonc310771]

ah yes that what i needed but just one thing how can i get the top and bottom parts to have the image too

[VIPStephan]

Apply it to the top and bottom part as you did to the container…?

Sonetimes the simple and obvious things actually are simple.

[jasonc310771]

yes i guessed that but this will mean the image is repeated somewhat.

which is not what i was looking for.

i am after an image that is in the background but to have the borders rounded to the rest of the containers

not sure how to explain it

[VIPStephan]

The best way to explain that is to show us something. A link to the page in question would be nice.

[CaptainB]

Put the top and bottom, without assigning a background-color or image to em (means they're transparent) in a new container and then apply the image to that container?

[jasonc310771]

here is a jpg of an example with an image that has rounded edges.

[DakotaChick]

add one of the following to your div tag containing the background image


background-repeat:no-repeat; /* Non repeating bg */
background-repeat:repeat-x; /* Repeating bg on the X-Axis (Horizontal repeat) */
background-repeat:repeat-y; /* Repeating bg on the Y-Axis (Vertical repeat) */


and if no background-repeat is specified it defaults to repeating on BOTH the X-Axis and Y-Axis