Is it possible to make a <div> element contain a background image, and if so, how would I go about doing this?
9 Answers
You mean this?
<style type="text/css"> .bgimg { background-image: url('../images/divbg.png'); } </style> ... <div> div with background </div> You can do that using CSS's background propieties. There are few ways to do it:
By ID
HTML: <div></div>
CSS:
#div-with-bg { background: color url('path') others; } By Class
HTML: <div></div>
CSS:
.div-with-bg { background: color url('path') others; } In HTML (which is evil)
HTML: <div></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
1Yes:
<div>Text here</div> 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></div> Use like ..
<div>Example of a DIV element with a background image:</div> <div> </div> You can simply add an img src Attribute with id:
<body> <img 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; } <div>Foo Bar</div> and in your CSS file:
.foo { background-image: url("images/foo.png"); } <div>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'); } For the most part, the method is the same as setting the whole body
.divi{ background-image: url('path'); } </style> <div></div> 
