HTML/CSS <div> background - html

Question

How do you set a background on a div? I have a block looking like this:`
<div class="span4">
<font color="000000">
<h4 class="text-center">This is the title</h4>
<p>This is my text</p>
<a href="#" class="btn btn-success">
<i class="icon-star icon-white"></i> This is my button</a>
</font>
</div>
I want to make this whole block have a background image, but when I try (I've tried 6 different methods already), It either doesn't work at all, doesn't fill the whole box, or fills the whole page.
After using JoshC's CSS related answer, I got this problem. In the image you can see my background, but it doesn't stretch across the whole area I want it to. The side bar, as far across as the left edge of the blue highlight on "Home", is meant to be a different image, (not set up yet) and the rest would be the displayed image.
This is the image
Another thing I'd like is a background applied to multiple divs, but not all, however that's optional...
Any help is much appreciated.

Answer 1

Apply a background-image like this:
.span4 {
background-image: url(http://example.com/image.png);
}
jsFiddle demo
or.. style within the HTML like this:
<div class="span4" style="background-image: url(http://example.com/image.png);"></div>
jsFiddle demo
You obviously have to change the URL to an image that exists.
See the specs on the background property here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

Answer 2

.span4
{
background-image:url('your image path');/* by this image set*/
background-color:#cccccc;/* and can use color*/
}

Answer 3

You can give somethinglike this: <div class="span4" style="background:url(../Pictures/website.png) no-repeat fixed;">

Answer 4

We are going to warp your head for a second. Divs are like boxes that exist with no border, no per-defined styles other than 100% width.
You are combining table-line HTML3 standard structure to the nature of a HTML5 div. In the newest code does not contain such attributes like table cells did in the past.
We would accomplish this today through CSS bound to ID's or classes to call those elements that exist within the DOM.
css
<style type="text/css">
.span4{ background-image:url('images/myimage.jpg');
background-repeat:no-repeat;
width:100px; height:100px; }
.span h4{ color:#000; text-align:center; }
.span4 p{ font-weight:bold; /*or whatever*/}
.span4 a{ font-style:italic; color:#0f0; }
.span4 a:hover{}
.span4 a:active{}
.span4 a:visited{}
.span4 a.btn{ color:blue; }
.span4 a.btn-success{ color:green; }
.span4 a.btn.btn-success
.icon-star:before{ content: '* '; }
.icon-white:before{ color:#fff; }
</style>
html
<div class="span4">
<h4>This is the title</h4>
<p>This is my text</p>
This is my button
</div>`