Adding background image to div using CSS

Question

I have been trying to add background image to a div class using CSS  but I didn t have any success  HTML code   lt header id  quot masthead quot  class  quot site-header quot  role  quot banner quot  gt       lt div class  quot header-shadow quot  gt  lt  div gt           lt hgroup gt  lt  hgroup gt           lt nav role  quot navigation quot  class  quot site-navigation main-navigation quot  gt            lt  nav gt  lt  --  site-navigation  main-navigation -- gt   lt  header gt  lt  --  masthead  site-header -- gt   CSS   header-shadow      background-image  url     images header-shade jpg       Additional information  This is an image with a shadow and I am using it at the top of the website  so it mustn t have a particular width

User · Answer

Use   content       background  url  http   www gransebryan com wp-content uploads 2016 03 bryan-ganzon-granse-who png   center no-repeat       displaybg      text-align  center     color   FFF

User · Answer

You need to add a width and a height of the background image for it to display properly  For instance   header-shadow      background-image  url     images header-shade jpg        width  XXpx      height  XXpx     As you mentioned that you are using it as a shadow  you can remove the width and add a background-repeat  either vertically or horizontally if required   For instance   header-shadow      background-image  url     images header-shade jpg        background-repeat  repeat-y     for vertical repeat        background-repeat  repeat-x     for horizontal repeat        height  XXpx     PS  XX is a dummy value  You need to replace it with your actual values of your image

User · Answer

Add height  amp  width properties to your  css file

User · Answer

lt html gt       lt head gt           lt style type  quot text css quot  gt  lt  --             body                   margin  0px                  padding  0px                              wrapper                   margin  0px auto                  padding  0px                  width  940px                  background-color   EEE                  background-image  url  quot images bg png quot                    background-repeat  repeat-y                  padding  0px 25px 4px 25px                              header                                headerIn                   width  940px                  margin  0 auto                  font-size  14px                              headerP1                   width  940px                  background  url  quot images lines tech png quot   repeat                  margin  0px auto                  height  140px                              container                   width  940px                  margin  0 auto                  font-size  14px                  height  auto                              footer                   width  100                   background   EEE                              footer                   width  940px                  margin  0 auto                  font-size  12px                  font-family  Georgia   quot Times New Roman quot   Times  serif                     background  url  quot images footer bg png quot   center bottom no-repeat                                 mainfooter                   width  990px                  background  url  quot images footer bg png quot   no-repeat                  margin-bottom  50px                  margin  0 auto                              footer  footerContainer                   width  940px                  margin  0 auto                  font-size  11px                              tblbdr table   tblbdr table td                   border-collapse  collapse                  border  solid 1px  CDCDCD                  padding  5px 5px                              tblbdr table   tblbdr table td                   border-collapse  collapse                  border  solid 1px  CDCDCD                  padding  5px 5px                              input                   padding  5px 5px                  margin  0px 0px                  border  solid 1px  DEDEDE                  background-color   F9F9F9                  font-size  12px                              tbl                   margin  0 auto                  padding-bottom  3px                  background  url  quot images tblbtm png quot   repeat-x bottom                              tbl1                   background  url  quot images tblright png quot   repeat-y right                  padding-right  2px                              button                   background  royalblue                  color   FFF                  border  none                  padding  5px 7px                  cursor  pointer                             ul                   list-style  square outside none                             ul li                   display  block                  height  auto                  line-height  29px                  text-decoration  none                  background-color   F6F6F6                  padding-left  30px                  font-family  Verdana                  border-bottom  1px solid  ebebeb                  background-image  url  images arrowC png                    background-repeat  no-repeat                  background-position  left -30px                              DivTab1                   width  270px                  height  199px                              DivTab1 a                   background-image  url  images nav bg jpg                    background-position  0 0                  float  left                  display  block                  width  85                   height  33px                  line-height  40px                  padding-left  40px                  color   000                              DivTab1 a hover                   background-image  url  images nav bg jpg                    background-position  left 33px                  float  left                  display  block                  width  85                   height  33px                  line-height  40px                  padding-left  40px                        -- gt  lt  style gt       lt  head gt        lt body gt           lt div class  quot wrapper quot  gt               lt div class  quot header quot  gt                   lt div class  quot headerIn quot  gt                       lt div class  quot headerP1 quot  gt Header lt  div gt                   lt  div gt               lt  div gt                lt div class  quot container quot  id  quot tblbdr quot  gt                   lt div class  quot tblt quot  style  quot padding 10px background  fff  width 500px margin 0px auto  quot  gt                       lt table border  quot 0 quot  align  quot center quot  cellpadding  quot 0 quot  cellspacing  quot 0 quot  width  quot 500px quot  gt                           lt tr gt  lt td gt Login lt  td gt  lt  tr gt                           lt tr gt  lt td gt  lt input type  quot text quot  class  quot input quot     gt  lt  td gt  lt  tr gt                           lt tr gt  lt td gt  lt input type  quot text quot  class  quot input quot     gt  lt  td gt  lt  tr gt                       lt  table gt                   lt  div gt                    lt br   gt  lt br   gt                    lt div class  quot tbl quot  gt                   lt div class  quot tbl1 quot  gt                   lt table border  quot 0 quot  style  quot background  fff  quot  align  quot center quot  cellpadding  quot 0 quot  cellspacing  quot 0 quot  width  quot 100  quot  gt                       lt tbody gt  lt tr gt                           lt td style  quot width  79px quot  gt                              State lt span style  quot color   ff0000 quot  gt   lt  span gt  lt  td gt                           lt td style  quot width  183px quot  gt                               lt select name  quot drpOwnerState quot  onchange  quot javascript setTimeout    doPostBack   drpOwnerState           0  quot  id  quot drpOwnerState quot  class  quot input quot  style  quot width 173px  quot  gt                                   lt option value  quot NA quot  gt Select lt  option gt                                   lt option selected  quot selected quot  value  quot AN quot  gt ANDAMAN AND NICOBAR ISLANDS lt  option gt                                   lt option value  quot AP quot  gt ANDHRA PRADESH lt  option gt                                   lt option value  quot AL quot  gt ARUNACHAL PRADESH lt  option gt                               lt  select gt                           lt  td gt                           lt td style  quot width  65px quot  gt                              Division lt span style  quot color   ff0000 quot  gt  lt  span gt  lt  td gt                           lt td style  quot width  187px quot  gt                               lt select name  quot drpOwnerDivision quot  onchange  quot javascript setTimeout    doPostBack   drpOwnerDivision           0  quot  id  quot drpOwnerDivision quot  disabled  quot disabled quot  class  quot input quot  style  quot width 173px  quot  gt                                   lt option selected  quot selected quot  value  quot NA quot  gt Select lt  option gt                                lt  select gt                           lt  td gt                           lt td style  quot width  56px quot  gt                              District lt span style  quot color   ff0000 quot  gt  lt  span gt  lt  td gt                           lt td colspan  quot 3 quot  gt                               lt select name  quot drpOwnerDistrict quot  onchange  quot javascript setTimeout    doPostBack   drpOwnerDistrict           0  quot  id  quot drpOwnerDistrict quot  disabled  quot disabled quot  class  quot input quot  style  quot width 173px  quot  gt                                   lt option selected  quot selected quot  value  quot NA quot  gt Select lt  option gt                               lt  select gt  lt  td gt                       lt  tr gt                       lt tr gt                           lt td colspan  quot 3 quot  gt                              Type any detail about your nearest KIOSK  lt  td gt                           lt td colspan  quot 5 quot  gt                               lt input name  quot txtSearch quot  type  quot text quot  maxlength  quot 100 quot  id  quot txtSearch quot  class  quot input quot  style  quot width 182px  quot  gt  lt  td gt                       lt  tr gt                       lt tr gt                           lt td align  quot center quot  colspan  quot 8 quot  style  quot height  23px quot  gt                               lt input type  quot submit quot  name  quot btnsearch quot  value  quot Search quot  onclick  quot return ListValidation    quot  id  quot btnsearch quot  gt                                lt input type  quot submit quot  class  quot button quot  name  quot lblExport quot  value  quot Export To Excel quot  id  quot lblExport quot  gt  lt  td gt                       lt  tr gt                       lt  tbody gt                   lt  table gt               lt  div gt           lt  div gt            lt br   gt  lt br   gt           lt div class  quot DivTab1 quot  style  quot z-index  750  quot  gt               lt a href  quot  Portal CitizenHome aspx servtypeid 1 quot  gt Applications lt  a gt  lt a href  quot  Portal CitizenHome aspx servtypeid 2 quot  gt                  Bill Payments lt  a gt   lt a href  quot  Portal CitizenHome aspx servtypeid 3 quot  gt Counseling lt  a gt               lt a href  quot  Portal CitizenHome aspx servtypeid 4 quot  gt Assessment lt  a gt   lt a href  quot  Portal CitizenHome aspx servtypeid 5 quot  gt                  Religious lt  a gt   lt a href  quot  Portal CitizenHome aspx servtypeid 6 quot  gt Reservation lt  a gt               lt a href  quot  Portal CitizenHome aspx servtypeid 7 quot  gt Universities lt  a gt           lt  div gt            lt br   gt  lt br   gt            lt div gt               lt ul gt                   lt li gt  lt spn gt This is testing code which may be more or less  lt  span gt  lt  li gt                   lt li gt This is testing code which may be more or less  This is testing code which may be more or less This is testing code which may be more or less  This is testing code which may be more or less  lt  li gt                   lt li gt This is testing code which may be more or less  lt  li gt                   lt li gt This is testing code which may be more or less  lt  li gt                   lt li gt This is testing code which may be more or less  lt  li gt               lt  ul gt           lt  div gt            lt  div gt             lt div class  quot footer quot  gt                lt div class  quot footerContainer quot  gt Footer lt  div gt               lt  div gt           lt  div gt            lt div class  quot mainfooter quot  gt  amp nbsp  lt  div gt        lt  body gt    lt  html gt

User · Answer

Specify a height and a width   header-shadow      background-image  url     images header-shade jpg        height  10px      width  10px

User · Answer

You can try this also for setting the class in a div section   x000D   x000D      CSS      content       background  url  http   www gransebryan com wp-content uploads 2016 03 bryan-ganzon-granse-who png   center no-repeat      displaybg      text-align  center     color   FFF    x000D   lt div class  content  gt        lt p class  displaybg  gt This is just a test lt  p gt    lt  div gt  x000D   x000D   x000D

User · Answer

To use an image for body background in CSS  body     background-image  url  image jpg

User · Answer

It is happening because  header-shadow is empty  Add height to it   header-shadow      background-image  url     images header-shade jpg        background-color  red      height  50px     Fiddle here

[css] Adding background image to div using CSS

Examples related to css

Examples related to html

Examples related to background-image