Adding a background image to a <div> element

Is it possible to make a <div> element contain a background image, and if so, how would I go about doing this?

Solution 1:

You mean this?

<style type="text/css">
.bgimg {
    background-image: url('../images/divbg.png');
}
</style>

...

<div class="bgimg">
    div with background
</div>

Solution 2:

You can do that using CSS's background propieties. There are few ways to do it:

By ID

HTML: <div id="div-with-bg"></div>

CSS:

#div-with-bg
{
    background: color url('path') others;
}

By Class

HTML: <div class="div-with-bg"></div>

CSS:

.div-with-bg
{
    background: color url('path') others;
}

In HTML (which is evil)

HTML: <div style="background: color url('path')"></div>

Where:

color is color in hex or one from X11 Colors
path is path to the image
others like position, attachament

background CSS Property is a connection of all background-xxx propieties in that syntax:

background: background-color background-image background-repeat background-attachment background-position;

Source: w3schools

Solution 3:

Yes:

<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>