197

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

0

9 Answers 9

Reset to default
232

You mean this?

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

...

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

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

1
  • I want to use the HTML method, but is it possible, by only using that method, to add 2 images that are differently situated. I know it is possible to do something like:background-image: url("image.jpg"), url("image2"); but doing this, both images will be in the same place, kinda "overlaying" each other, and I want to set different positions for them.
    – PaulP1
    Commented Mar 2, 2019 at 14:41
36

Yes:

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

Use this style to get a centered background image without repeat.

.bgImgCenter{
    background-image: url('imagePath');
    background-repeat: no-repeat;
    background-position: center; 
    position: relative;
}

In HTML, set this style for your div:

<div class="bgImgCenter"></div>
11

Use like ..

<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div>
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>
1
  • Surely the path should be in single quotes??
    – ofey
    Commented Mar 13, 2019 at 22:14
10

You can simply add an img src Attribute with id:

<body>
<img id="backgroundimage" src="bgimage.jpg" border="0" alt="">
</body>

and in your CSS file (stretch background):

#backgroundimage
{
   height: auto;
   left: 0;
   margin: 0;
   min-height: 100%;
   min-width: 674px;
   padding: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: -1;
}
2
  • 2
    The question is about adding a background element to a div, not adding a seperate img attribute so this does not provide an answer to the question.
    – Dipen Shah
    Commented Apr 21, 2016 at 18:31
  • 7
    While this solution doesn't properly answer the question, it did give me an idea for another issue I was facing so for that I offer my thanks.
    – Striker
    Commented Apr 23, 2016 at 12:45
6 
<div class="foo">Foo Bar</div>

and in your CSS file:

.foo {
    background-image: url("images/foo.png");
}
2 
<div id="image">Example to have Background Image</div>

We need to Add the below content in Style tag:

.image {
  background-image: url('C:\Users\ajai\Desktop\10.jpg');
}
2
  • 1
    Your local path: C:\Users\ajai\Desktop\10.jpg is never going to work online ;)
    – Brad Ahrens
    Commented Nov 17, 2019 at 21:18
  • 1
    Just for shake i give this path
    – Guvaliour
    Commented Dec 14, 2019 at 3:48
0

For the most part, the method is the same as setting the whole body

.divi{
    background-image: url('path');
}

</style>

<div class="divi"></div>

Not the answer you're looking for? Browse other questions tagged or ask your own question.