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>
Related videos on Youtube
Comments
-
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 over 7 yearsThe 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 over 7 yearsWhile 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 almost 5 yearsI 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 over 4 yearsSurely the path should be in single quotes??
-
Brad Ahrens about 4 yearsYour local path: C:\Users\ajai\Desktop\10.jpg is never going to work online ;)
-
Guvaliour almost 4 yearsJust for shake i give this path