Adding a background image to a <div> element

935,133

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>

Solution 4

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>

Solution 5

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>
Share:
935,133

Related videos on Youtube

Sandeep
Author by

Sandeep

I am a Programmer..

Updated on May 28, 2021

Comments

  • Sandeep
    Sandeep over 2 years

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

  • Dipen Shah
    Dipen Shah over 7 years
    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.
  • Striker
    Striker over 7 years
    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.
  • PaulP1
    PaulP1 almost 5 years
    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.
  • Shane G
    Shane G over 4 years
    Surely the path should be in single quotes??
  • Brad Ahrens
    Brad Ahrens about 4 years
    Your local path: C:\Users\ajai\Desktop\10.jpg is never going to work online ;)
  • Guvaliour
    Guvaliour almost 4 years
    Just for shake i give this path

Related