Is it possible to make a <div> element contain a background image, and if so, how would I go about doing this?
Add a comment
|
9 Answers
You mean this?
<style type="text/css">
.bgimg {
background-image: url('../images/divbg.png');
}
</style>
...
<div class="bgimg">
div with background
</div>
2 Comments
Valentino Ru
can I set it non-repeatable?
Matt Becker
yes: background-repeat: no-repeat; w3schools.com/cssref/pr_background-repeat.asp
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 Comment
PaulP1
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.
Yes:
<div style="background-image: url(../images/image.gif); height: 400px; width: 400px;">Text here</div>
Comments
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>
Comments
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 Comment
ofey
Surely the path should be in single quotes??
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 Comments
Dipen Shah
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
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.
<div class="foo">Foo Bar</div>
and in your CSS file:
.foo {
background-image: url("images/foo.png");
}
Comments
<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 Comments
Brad Ahrens
Your local path: C:\Users\ajai\Desktop\10.jpg is never going to work online ;)
Guvaliour
Just for shake i give this path
For the most part, the method is the same as setting the whole body
.divi{
background-image: url('path');
}
</style>
<div class="divi"></div>
