How can I make my website s background transparent without making the content images text transparent too

Question

I m doing a website for a school project  and I m currently having a small problem    I can t make the body s background transparent without it also affecting the content in it   Here s my HTML code    lt html gt   lt head gt       lt meta http-equiv  Content-Type  content  text html  charset iso-8859-1    gt       lt meta http-equiv  Content-Style-Type  content  text css    gt       lt title gt text lt  title gt       lt link href  style css  rel  stylesheet  type  text css    gt   lt  head gt   lt body gt   lt div class  head  gt   lt  div gt   lt div id  wrapper  gt       lt ul id  nav  gt           lt li gt  lt a href  index htm  gt Inicio lt  a gt  lt  li gt           lt li gt  lt a href  sobre htm  gt Sobre a banda lt  a gt  lt  li gt           lt li gt  lt a href  membros htm  gt Membros lt  a gt  lt  li gt           lt li gt  lt a href  bilhetes htm  gt Bilhetes lt  a gt  lt  li gt           lt li gt  lt a href  galeria htm  gt Galeria lt  a gt  lt  li gt           lt li gt  lt a href  areapessoal php  gt   rea Pessoal lt  a gt  lt  li gt       lt  ul gt       lt h1 gt  lt a href  index htm  gt  lt img src  images a7x-avenged-sevenfold-7050435-1024-831 jpg  width  130  height  25  alt  Rock Band    gt  lt  a gt  lt  h1 gt       lt div id  body  gt           lt div id  bodyi  gt               lt div id  bodyj  gt                   lt div id  sidebar  gt                       lt div class  content  gt                           lt h2 gt Galeria de imagens lt  h2 gt                           lt p gt Aqui poder   encontrar uma galeria de imagens da banda  com fotos de concertos                           lt img src  images denmark jpg  width  91  height  72  alt      gt                          entre outras imagens  lt  p gt                           lt p class  readmore  gt  lt a href  galeria htm  gt Ver lt  a gt  lt  p gt                       lt  div gt                       lt div class  content  gt                           lt h2 gt Noticias lt  h2 gt                           lt h3 gt 18 de Abril  2011 lt  h3 gt                           lt h4 gt  So Far Away  vai ter videoclip lt  h4 gt                           lt p gt Muitos se questionavam se o mais recente single dos Avenged Sevenfold   So Far Away   ia ter direito a um videoclip  Eis que surge a boa not  cia para os f  s dos A7X  So Far Away vai ter videoclip                           lt img src  images 63781127 jpg  width  95  height  73  alt  pic 3    gt                          J   foram divulgadas algumas fotos do set de filmagens  lt  p gt                           lt h3 gt 10 de Mar  o  2011 lt  h3 gt                           lt h4 gt A7X nomeados para a Metal Hammer Golden Gods Awards 2011 lt  h4 gt                           lt p gt Os Avenged Sevenfold foram nomeados para a Metal Hammer Golden Gods Awards 2011 em duas categorias                          As categorias onde os A7X est  o a participar s  o as seguintes  lt p gt                          - Best International Band  Melhor Banda Internacional  lt p gt                          - Best Shredder  com o Synyster Gates   Melhor Shredder  lt  p gt                       lt  div gt                   lt  div gt                   lt div id  content  gt                       lt center gt  lt img src  images avengeds jpg  width  346  height  234  alt  four men walking    gt  lt  center gt                       lt div class  content  gt                           lt h2 gt O album mais recente lt  h2 gt                           lt img src  images nightmare jpg  width  82  height  80  alt  Unwired album cover  class  left    gt                           lt p gt Os californianos Avenged Sevenfold est  o de volta aos discos com  Nightmare   Solos de guitarra  vocaliza    es rasgadas e um som contagiante continuam a ser a base do sucesso de uma das bandas de heavy-metal com mais f  s no mundo inteiro                           Fundados em 1999 por M  Shadows  Synyster Gates  Zacky Vengeance  Johnny Christ e The Rev - baterista que faleceu em Dezembro de 2009 passado e que foi substituido neste disco por Mike Portnoy  dos Dream Theater - os Avenged Sevenfold j   contam com cinco discos de originais na sua carreira  lt  p gt                           lt div class  divider  gt  lt  div gt                           lt h2 gt Musicas com maior sucesso lt  h2 gt                           lt table summary  track downloads  border  0  cellspacing  0  gt                           lt tr gt                               lt th width  55   gt Faixa lt  th gt                               lt th gt Album lt  th gt                               lt th class  hidden  gt Dowload links lt  th gt                           lt  tr gt                           lt tr gt                               lt td gt Bat Country lt  td gt                               lt td gt City of Evil lt  td gt                               lt td class  download  gt  lt a href  http   www youtube com watch v IHS3qJdxefY  gt Ouvir lt  a gt  lt  td gt                           lt  tr gt                           lt tr gt                               lt td gt Beast and the Harlot lt  td gt                               lt td gt City of Evil lt  td gt                               lt td class  download  gt  lt a href  http   www youtube com watch v 7bDg7n-chhU  gt Ouvir lt  a gt  lt  td gt                           lt  tr gt                           lt tr gt                               lt td gt Seize the Day lt  td gt                               lt td gt City of Evil lt  td gt                               lt td class  download  gt  lt a href  http   www youtube com watch v jUkoL9RE72o  gt Ouvir lt  a gt  lt  td gt                           lt  tr gt                           lt tr gt                               lt td gt Almost Easy lt  td gt                               lt td gt Avenged Sevenfold lt  td gt                               lt td class  download  gt  lt a href  http   www youtube com watch v Fi GN1pHCVc  gt Ouvir lt  a gt  lt  td gt                           lt  tr gt                           lt tr gt                               lt td gt Afterlife lt  td gt                               lt td gt Avenged Sevenfold lt  td gt                               lt td class  download  gt  lt a href  http   www youtube com watch v HIRNdveLnJI  gt Ouvir lt  a gt  lt  td gt                           lt  tr gt                           lt tr gt                               lt td gt Nightmare lt  td gt                               lt td gt Nightmare lt  td gt                               lt td class  download  gt  lt a href  http   www youtube com watch v 94bGzWyHbu0  gt Ouvir lt  a gt  lt  td gt                           lt  tr gt                           lt tr gt                               lt td gt Welcome to the Family lt  td gt                               lt td gt Nightmare lt  td gt                               lt td class  download  gt  lt a href  http   www youtube com watch v 1OZs7IoWTvc  gt Ouvir lt  a gt  lt  td gt                           lt  tr gt                           lt  table gt                       lt  div gt                   lt  div gt                   lt div class  clear  gt  lt  div gt               lt  div gt           lt  div gt       lt  div gt       lt div align  right  gt           lt font size  2  gt text lt  font gt       lt  div gt   lt  div gt   lt  body gt   lt  html gt    And here s the CSS code    head      width  150px      height  160px    body       font-family  tahoma  helvetica  arial  sans-serif      font-size  12px      text-align  center      background   000      color   ddd4d4      padding-top  12px      line-height  2      background-image  url  images background jpg        background-repeat  no-repeat      background-attachment  fixed      background-size  100       opacity  0 8      filter alpha opacity 80     td  th       font-size  12px      text-align  left      line-height  2     wrapper       margin  auto      text-align  left      width  832px      position  relative      padding-top  27px     body        background  url images body bg 1 gif  repeat-y       width  832px     bodyi        background  url images body top 1 gif  no-repeat       width  832px     bodyj        background  url images body bot 1 gif  bottom no-repeat       padding  1px 0          body2        background  url images body bg 2 gif  repeat-y       width  832px     bodyi2        background  url images body top 2 gif  no-repeat       width  832px     bodyj2        background  url images body bot 2 gif  bottom no-repeat       padding  1px 0    h1  h2  h3   nav   nav li       margin  0  padding  0     nav       font-size  10px      position  absolute      right  0      top  12px      line-height  1 2      padding-left  120px     nav li       float  left      width  108px      list-style  none      margin-left  2px      border-bottom  1px solid black     nav a       background   738d09      color   2e3901      font-weight  bold      text-decoration  none      display  block      text-align  center      padding  1px 0     sidebar       float  left      width  250px      padding-left  4px     sidebar  content       padding-left  24px     sidebar  content img       float  left      clear  left      margin  5px 5px 5px 0     sidebar  divider       background  url images left splitter gif  center no-repeat      height  5px      width  169px     content       float  right      width  462px     content1       float  left      width  800px     content1  content       margin  7px 35px 7px 20px      padding-left  20px     content  content       margin  7px 55px 7px 17px     content  content table       width  310px      margin-right  0px     content  content table td   content  content table th       padding-right  10px     content  content table td download       text-align  right      padding-right  0px     content  divider       background  url images right splitter gif  repeat-x      height  5px    h1       position  absolute      left  0      top  0    h2       font-size  10px      color   cf9118      margin  1em 0    h3       font-size  10px      margin  1em 0    h5       font-size  20px      color   cf9118      margin  1em 0      text-align  center    h6       font-size  18px      margin  1em 0    p       margin  1em 0    img       border  0    img left    float  left  margin-right  14px    img right   float  right  margin-left  14px     readmore       text-align  right     hidden       visibility  hidden     clear       clear  both    a       color   f0b33c      font-weight  bold      text-decoration  none    a visited       color   cf9118    a hover       text-decoration  underline    table a       text-decoration  underline      font-weight  normal      color   7f7c79     power  color  fff text-align center    power a  color  fff     Any help s appreciated    Thanks in advance

User · Answer

I would agree with  evillinux  It would be best to make your background image semi transparent so it supports  lt  ie8  The other suggestions of using another div are also a great option  and it s the way to go if you want to do this in css  For example if the site had such features as selecting your own background color  I would suggest using a filter for older IE  eg   filter Alpha opacity 50

User · Answer

You probably want an extra wrapper  use a div for the background and position it below your content    http   jsfiddle net pixelass 42F2j   HTML   lt div id  background-image  gt  lt  div gt   lt div id  content  gt      Here is the content at opacity 1      lt img src  http   lorempixel com 100 50 fashion 1   gt    lt  div gt    CSS   background-image       background-image  url http   lorempixel com 400 200 sports 1        opacity 0 4      position absolute      top 0      left 0      height 200px      width 400px      z-index 0     content       z-index 1      position relative

User · Answer

I think the simplest solution  rather than making the body element partially transparent  would be to add an extra div to hold the background  and change the opacity there  instead   So you would add a div like    lt div id  background  gt  lt  div gt    And move your body element s background CSS to it  as well as some additional positioning properties  like this    background       position  fixed      top  0      left  0      width  100       height  100       background-image  url  images background jpg        background-repeat  no-repeat      background-attachment  fixed      background-size  100       opacity  0 8      filter alpha opacity 80       Here s an example  http   jsfiddle net nbVg4 4

User · Answer

Make the background image transparent semi-transparent  If it s a solid coloured background just create a 1px by 1px image in fireworks or whatever and adjust its opacity

User · Answer

There is a css3 solution here if that is acceptable   It supports the graceful degradation approach where css3 isn t supported   you just won t have any transparency   body       font-family  tahoma  helvetica  arial  sans-serif      font-size  12px      text-align  center      background   000      color   ddd4d4      padding-top  12px      line-height  2      background-image  url  images background jpg        background-repeat  no-repeat      background-attachment  fixed      background-size  100       background  rgb 0  0  0      for older browsers        background  rgba 0  0  0  0 8      R  G  B  A        filter  progid DXImageTransform Microsoft gradient startColorstr  CC000000  endColorstr  CC0000      AA  RR  GG  BB         to get the hex equivalent of 80   CC  take  pct   100    255 and convert to hex

User · Answer

Just include following in your code    lt body background  C  Users Desktop images jpg  gt     if you want to specify the size and opacity you can use following    lt p gt  lt img style  opacity 0 9   src  C  Users Desktop images jpg  width  300  height  231  alt  Image    gt  lt  p gt

User · Answer

background rgba 0 0 0 0   opacity 1

User · Answer

I think what s happening  is that  since the wrapper id is relatively position  it just appears on the same position with the body tag  what you should do  is that you can add a Z-index to the wrapper id    wrapper   margin  auto  text-align  left  width  832px  position  relative  padding-top  27px  z-index  99     added this line         This should make layers above the transparent body tag

[html] How can I make my website's background transparent without making the content (images & text) transparent too?

Examples related to html

Examples related to css

Examples related to background

Examples related to opacity

Examples related to transparent