Adding a background image to a div element

Question

Is it possible to make a  lt div gt  element contain a background image  and if so  how would I go about doing this

User · Accepted Answer

You mean this    lt style type  text css  gt   bgimg       background-image  url     images divbg png       lt  style gt         lt div class  bgimg  gt      div with background  lt  div gt

User · Answer

You can do that using CSS s background propieties  There are few ways to do it     By ID  HTML   lt div id  div-with-bg  gt  lt  div gt   CSS    div-with-bg       background  color url  path   others        By Class  HTML   lt div class  div-with-bg  gt  lt  div gt   CSS    div-with-bg       background  color url  path   others        In HTML  which is evil   HTML   lt div style  background  color url  path    gt  lt  div gt     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

User · Answer

lt div class  foo  gt Foo Bar lt  div gt    and in your CSS file    foo       background-image  url  images foo png

User · Answer

You can simply add an img src Attribute with id    lt body gt   lt img id  backgroundimage  src  bgimage jpg  border  0  alt    gt   lt  body gt    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

User · Answer

Use like      lt div style  background-image  url    images test-background gif   height  200px  width  400px  border  1px solid black   gt Example of a DIV element with a background image  lt  div gt   lt div style  background-image  url    images test-background gif   height  200px  width  400px  border  1px solid black   gt   lt  div gt

User · Answer

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    lt div class  bgImgCenter  gt  lt  div gt

User · Answer

lt div id  quot image quot  gt Example to have Background Image lt  div gt   We need to Add the below content in Style tag   image     background-image  url  C  Users ajai Desktop 10 jpg

User · Answer

Yes    lt div style  background-image  url    images image gif   height  400px  width  400px   gt Text here lt  div gt

User · Answer

For the most part  the method is the same as setting the whole body     divi      background-image  url  path        lt  style gt    lt div class  divi  gt  lt  div gt

[html] Adding a background image to a <div> element

Examples related to html