Issue with background color and Google Chrome

Question

Sometimes I get a broken background in Chrome  I do not get this error with any other browser    This is the simple CSS line responsible for the background color of body   body       background  black     color  white     font-family  Chaparral Pro  lucida grande  verdana  sans-serif      This is exactly how I get this problem  I click a link included in an Gmail s email and I get something wrong  no background   I then refresh the page and the background is colored completely   How do fix this problem

User · Answer

I was able to fix this with   html   height  100

User · Answer

I was able to fix this with   html   height  100

User · Answer

I m seen this problem with Chrome too  if I remember correctly if you minimize and then maximize your window it fixes it as well   Haven t really used Chrome too much since it was released but this is definitely something I blame on Google as the code I was checking it on was air tight

User · Answer

I am not sure 100   but try to replace selector with  html  body    html  body       background  black     color  white     font-family  Chaparral Pro  lucida grande  verdana  sans-serif

User · Answer

My Cascading Style Sheet used     body  background-color   FAF0E6  font-family  arial  sans-serif     It worked in Internet Explorer but failed in Firefox and Chrome  I changed it to   body  background   FAF0E6  font-family  arial  sans-serif      i e  I removed -color    It works in all three browsers   I had to restart Chrome

User · Answer

I m pretty sure this is a bug in Chrome  Most likely it happens if you resize the browser TO full screen  then switch tabs  And sometimes if you just switch tabs open a new one  Good to hear you found a  fix  though

User · Answer

body  html       width  100      height  100       Worked for me

User · Answer

I m seen this problem with Chrome too  if I remember correctly if you minimize and then maximize your window it fixes it as well   Haven t really used Chrome too much since it was released but this is definitely something I blame on Google as the code I was checking it on was air tight

User · Answer

Never heard of it  Try   html  body     width  100     height  100     background-color   000    color   fff    font-family

User · Answer

I am not sure 100   but try to replace selector with  html  body    html  body       background  black     color  white     font-family  Chaparral Pro  lucida grande  verdana  sans-serif

User · Answer

HTML and body height 100  doesn t work in older IE versions   You have to move the backgroundproperties from the body element to the html element  That will fix it crossbrowser

User · Answer

IF you re still having trouble  you may try switching  top  to  bottom  in chromeFix above  and also a div rather than a span   lt div id  chromeFix  gt  lt  div gt    style    chromeFix   display  block  position  absolute  width  1px  height  100   bottom  0px  left  0px

User · Answer

Oddly enough it doesn t actually happen on every page and it doesn t seem to always work even when refreshed   My solutions was to add  height  100    as well

User · Answer

Everybody has said your code is fine  and you know it works on other browsers without problems  So it s time to drop the science and just try stuff     Try putting the background color IN the body tag itself instead of as-well-as in the CSS  Maybe insist again  redudantly  in Javascript  At some point  Chrome will have to place the background as you want it every time  Might be a timing-interpreting issue      Should any of this work  of course  you can toggle it on the server-side so the funny code only shows up in Chrome  And in a few months  when Chrome has changed and the problem disappears    well  worry about that later

User · Answer

I had the same issue on a couple of sites and fixed it by moving the background styling from body to html  which I guess is a variation of the body    to html  body   technique already mentioned but shows that you can make do with the style on html only   e g     body      background-color  000000     background-image url  images bg png       background-repeat repeat-x     font-family Arial Helvetica sans-serif     font-size 85      color  cccccc       becomes  html      background-color  000000     background-image url  images bg png       background-repeat repeat-x    body      font-family Arial Helvetica sans-serif     font-size 85      color  cccccc      This worked in IE6-8  Chrome 4-5  Safari 4  Opera 10 and Firefox 3 x with no obvious nasty side-effects

User · Answer

When you create CSS style using Dreamweaver for web designing  Dreamweaver adds a default code such as  charset    utf-8    Try removing this from your stylesheet  the background image or colour should display properly  Source

User · Answer

body  html       width  100      height  100       Worked for me

User · Answer

After trying all of the other solutions here without success  I skeptically tried the solution found in this article  and got it to work   Essentially  it boils down to removing  charset  utf-8   from your CSS   This seems like a poor implementation in DreamWeaver - but it did fix the issue for me  regardless

User · Answer

When you create CSS style using Dreamweaver for web designing  Dreamweaver adds a default code such as  charset    utf-8    Try removing this from your stylesheet  the background image or colour should display properly  Source

User · Answer

Ok guys  I found a solution    It s not great but does the trick with no side effects   The HTML    lt span id  chromeFix  gt  lt  span gt      put this below the body tags   The CSS    chromeFix   display  block  position  absolute  width  1px  height  100   top  0px  left  0px      What this does to solve the issue    It forces Chrome to think the page s content is 100  when it s not - this stops the body  appearing  the size of the content and resolves the missing background bug  This is basically doing what height  100  does when applied to the body or html but you don t get the side effect of having your backgrounds cut off when scrolling  past 100  page height  like you do with a 100  height on those elements    I can sleep now

User · Answer

I would try what Logan and 1mdm suggested  tho tweak the CSS  but I would really wait for a new Chrome version to come out with fixed bugs  before growing white hair     IMHO the current Chrome version is still alpha version and was released so that it can spread while it is in development  I personally had issues with table widths  my code worked fine in EVERY browser but could not make it work in Chrome

User · Answer

HTML and body height 100  doesn t work in older IE versions   You have to move the backgroundproperties from the body element to the html element  That will fix it crossbrowser

User · Answer

I had the same issue on a couple of sites and fixed it by moving the background styling from body to html  which I guess is a variation of the body    to html  body   technique already mentioned but shows that you can make do with the style on html only   e g     body      background-color  000000     background-image url  images bg png       background-repeat repeat-x     font-family Arial Helvetica sans-serif     font-size 85      color  cccccc       becomes  html      background-color  000000     background-image url  images bg png       background-repeat repeat-x    body      font-family Arial Helvetica sans-serif     font-size 85      color  cccccc      This worked in IE6-8  Chrome 4-5  Safari 4  Opera 10 and Firefox 3 x with no obvious nasty side-effects

User · Answer

Simple  correct  solution - define the background image and colour in html  not body   Unless you ve defined a specific height  not a percentage  in the body  its height will be assumed to be as tall as required to hold all content   so your background styling should go into html  which is the entire html document  not just the body   Simples

User · Answer

I had the same thing in both Chrome and Safari aka Webkit browsers  I m suspecting it s not a bug  but the incorrect use of css which  breaks  the background   In the Question above  the body background property is set to   background  black    Which is fine  but not entirely correct  There s no image background  thus     background-color  black

User · Answer

Google Chrome and safari needs a tweak for body and background issues  We have use additional identifier as mentioned below    lt style gt  body   background  204960 url    images example gif  repeat-x top  margin 0  padding 0  font-family Tahoma  font-size 12px      body  background  204960 url    images example gif  repeat-x top  margin 0  padding 0  font-family Tahoma  font-size 12px    lt  style gt       lt body id  body  gt    Use both body and  body identifier and enter same styles in both  Make the body tag with id attribute of body   This works for me

User · Answer

I would try what Logan and 1mdm suggested  tho tweak the CSS  but I would really wait for a new Chrome version to come out with fixed bugs  before growing white hair     IMHO the current Chrome version is still alpha version and was released so that it can spread while it is in development  I personally had issues with table widths  my code worked fine in EVERY browser but could not make it work in Chrome

User · Answer

I am not sure 100   but try to replace selector with  html  body    html  body       background  black     color  white     font-family  Chaparral Pro  lucida grande  verdana  sans-serif

User · Answer

I would try what Logan and 1mdm suggested  tho tweak the CSS  but I would really wait for a new Chrome version to come out with fixed bugs  before growing white hair     IMHO the current Chrome version is still alpha version and was released so that it can spread while it is in development  I personally had issues with table widths  my code worked fine in EVERY browser but could not make it work in Chrome

User · Answer

I m seen this problem with Chrome too  if I remember correctly if you minimize and then maximize your window it fixes it as well   Haven t really used Chrome too much since it was released but this is definitely something I blame on Google as the code I was checking it on was air tight

User · Answer

Oddly enough it doesn t actually happen on every page and it doesn t seem to always work even when refreshed   My solutions was to add  height  100    as well

User · Answer

It must be a WebKit issue as it is in both Safari 4 and Chrome

User · Answer

I m pretty sure this is a bug in Chrome  Most likely it happens if you resize the browser TO full screen  then switch tabs  And sometimes if you just switch tabs open a new one  Good to hear you found a  fix  though

User · Answer

Never heard of it  Try   html  body     width  100     height  100     background-color   000    color   fff    font-family

User · Answer

Google Chrome and safari needs a tweak for body and background issues  We have use additional identifier as mentioned below    lt style gt  body   background  204960 url    images example gif  repeat-x top  margin 0  padding 0  font-family Tahoma  font-size 12px      body  background  204960 url    images example gif  repeat-x top  margin 0  padding 0  font-family Tahoma  font-size 12px    lt  style gt       lt body id  body  gt    Use both body and  body identifier and enter same styles in both  Make the body tag with id attribute of body   This works for me

User · Answer

Oddly enough it doesn t actually happen on every page and it doesn t seem to always work even when refreshed   My solutions was to add  height  100    as well

User · Answer

After trying all of the other solutions here without success  I skeptically tried the solution found in this article  and got it to work   Essentially  it boils down to removing  charset  utf-8   from your CSS   This seems like a poor implementation in DreamWeaver - but it did fix the issue for me  regardless

User · Answer

I had the same thing in both Chrome and Safari aka Webkit browsers  I m suspecting it s not a bug  but the incorrect use of css which  breaks  the background   In the Question above  the body background property is set to   background  black    Which is fine  but not entirely correct  There s no image background  thus     background-color  black

User · Answer

I m seen this problem with Chrome too  if I remember correctly if you minimize and then maximize your window it fixes it as well   Haven t really used Chrome too much since it was released but this is definitely something I blame on Google as the code I was checking it on was air tight

User · Answer

My Cascading Style Sheet used     body  background-color   FAF0E6  font-family  arial  sans-serif     It worked in Internet Explorer but failed in Firefox and Chrome  I changed it to   body  background   FAF0E6  font-family  arial  sans-serif      i e  I removed -color    It works in all three browsers   I had to restart Chrome

User · Answer

It must be a WebKit issue as it is in both Safari 4 and Chrome

User · Answer

Everybody has said your code is fine  and you know it works on other browsers without problems  So it s time to drop the science and just try stuff     Try putting the background color IN the body tag itself instead of as-well-as in the CSS  Maybe insist again  redudantly  in Javascript  At some point  Chrome will have to place the background as you want it every time  Might be a timing-interpreting issue      Should any of this work  of course  you can toggle it on the server-side so the funny code only shows up in Chrome  And in a few months  when Chrome has changed and the problem disappears    well  worry about that later

User · Answer

I would try what Logan and 1mdm suggested  tho tweak the CSS  but I would really wait for a new Chrome version to come out with fixed bugs  before growing white hair     IMHO the current Chrome version is still alpha version and was released so that it can spread while it is in development  I personally had issues with table widths  my code worked fine in EVERY browser but could not make it work in Chrome

User · Answer

IF you re still having trouble  you may try switching  top  to  bottom  in chromeFix above  and also a div rather than a span   lt div id  chromeFix  gt  lt  div gt    style    chromeFix   display  block  position  absolute  width  1px  height  100   bottom  0px  left  0px

User · Answer

Ok guys  I found a solution    It s not great but does the trick with no side effects   The HTML    lt span id  chromeFix  gt  lt  span gt      put this below the body tags   The CSS    chromeFix   display  block  position  absolute  width  1px  height  100   top  0px  left  0px      What this does to solve the issue    It forces Chrome to think the page s content is 100  when it s not - this stops the body  appearing  the size of the content and resolves the missing background bug  This is basically doing what height  100  does when applied to the body or html but you don t get the side effect of having your backgrounds cut off when scrolling  past 100  page height  like you do with a 100  height on those elements    I can sleep now

User · Answer

Everybody has said your code is fine  and you know it works on other browsers without problems  So it s time to drop the science and just try stuff     Try putting the background color IN the body tag itself instead of as-well-as in the CSS  Maybe insist again  redudantly  in Javascript  At some point  Chrome will have to place the background as you want it every time  Might be a timing-interpreting issue      Should any of this work  of course  you can toggle it on the server-side so the funny code only shows up in Chrome  And in a few months  when Chrome has changed and the problem disappears    well  worry about that later

User · Answer

Simple  correct  solution - define the background image and colour in html  not body   Unless you ve defined a specific height  not a percentage  in the body  its height will be assumed to be as tall as required to hold all content   so your background styling should go into html  which is the entire html document  not just the body   Simples

User · Answer

Ok guys  I found a solution    It s not great but does the trick with no side effects   The HTML    lt span id  chromeFix  gt  lt  span gt      put this below the body tags   The CSS    chromeFix   display  block  position  absolute  width  1px  height  100   top  0px  left  0px      What this does to solve the issue    It forces Chrome to think the page s content is 100  when it s not - this stops the body  appearing  the size of the content and resolves the missing background bug  This is basically doing what height  100  does when applied to the body or html but you don t get the side effect of having your backgrounds cut off when scrolling  past 100  page height  like you do with a 100  height on those elements    I can sleep now

User · Answer

Never heard of it  Try   html  body     width  100     height  100     background-color   000    color   fff    font-family

User · Answer

Never heard of it  Try   html  body     width  100     height  100     background-color   000    color   fff    font-family

User · Answer

Everybody has said your code is fine  and you know it works on other browsers without problems  So it s time to drop the science and just try stuff     Try putting the background color IN the body tag itself instead of as-well-as in the CSS  Maybe insist again  redudantly  in Javascript  At some point  Chrome will have to place the background as you want it every time  Might be a timing-interpreting issue      Should any of this work  of course  you can toggle it on the server-side so the funny code only shows up in Chrome  And in a few months  when Chrome has changed and the problem disappears    well  worry about that later

User · Answer

Here is how I ended up solving the problem   This was the actual issue  clearly the body tag defined in CSS was not picked up     My environment  Chrome Browser Safari    First time when it does not work  So according to the thread recommendation here I ended up adding the css file with the html entry  Sample CSS file  mystyle css   lt style type     text css     gt  html    background-color  000000   background-repeat repeat-x      body    background-color   DCDBD9  color   2C2C2C  font  normal 100  Cambria  Georgia  serif     lt  style gt    Sample html file    lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01  EN  gt    lt html gt   lt head gt     lt meta name  generator  content  HTML Tidy for Mac OS X  vers 31 October 2006 - Apple Inc  build 15 6   see www w3 org  gt      lt title gt Test Html File lt  title gt     lt link rel  stylesheet  href  mystyle css  type  text css  gt   lt  head gt    lt body gt     lt h1 gt Achieve sentence with Skynet  READ MORE lt  a gt  lt  h1 gt   lt  body gt   lt  html gt    After the first loading it will work in Chrome and then go back to CSS file comment the html entry  so your modified CSS will be    lt style type     text css     gt     html         background-color  000000        background-image url  bg png          background-repeat repeat-x        body       background-color   DCDBD9      color   2C2C2C      font  normal 100  Cambria  Georgia  serif            lt  style gt    Clearly seems to be bug in webkit  Saw the same behavior in Safari as well  Thanks for sharing the html information  have been hunting around forever of why the body tag was not working    The final output is something like this

User · Answer

I am not sure 100   but try to replace selector with  html  body    html  body       background  black     color  white     font-family  Chaparral Pro  lucida grande  verdana  sans-serif

User · Answer

Adam s chromeFix solution with Paul Alexander s pure-CSS modification solved the problem in Chrome  but not in Safari   A couple additional tweaks solved the problem in Safari  too  width  100  and z-index -1  or some other appropriate negative value that puts this element behind all the other elements on the page    The CSS   body after  display block  position absolute  width 100   height 100   top 0px  left 0px  z-index -1  content

User · Answer

I was able to fix this with   html   height  100

User · Answer

I was able to fix this with   html   height  100

User · Answer

Ok guys  I found a solution    It s not great but does the trick with no side effects   The HTML    lt span id  chromeFix  gt  lt  span gt      put this below the body tags   The CSS    chromeFix   display  block  position  absolute  width  1px  height  100   top  0px  left  0px      What this does to solve the issue    It forces Chrome to think the page s content is 100  when it s not - this stops the body  appearing  the size of the content and resolves the missing background bug  This is basically doing what height  100  does when applied to the body or html but you don t get the side effect of having your backgrounds cut off when scrolling  past 100  page height  like you do with a 100  height on those elements    I can sleep now

User · Answer

Adam s chromeFix solution with Paul Alexander s pure-CSS modification solved the problem in Chrome  but not in Safari   A couple additional tweaks solved the problem in Safari  too  width  100  and z-index -1  or some other appropriate negative value that puts this element behind all the other elements on the page    The CSS   body after  display block  position absolute  width 100   height 100   top 0px  left 0px  z-index -1  content

User · Answer

Oddly enough it doesn t actually happen on every page and it doesn t seem to always work even when refreshed   My solutions was to add  height  100    as well

User · Answer

Here is how I ended up solving the problem   This was the actual issue  clearly the body tag defined in CSS was not picked up     My environment  Chrome Browser Safari    First time when it does not work  So according to the thread recommendation here I ended up adding the css file with the html entry  Sample CSS file  mystyle css   lt style type     text css     gt  html    background-color  000000   background-repeat repeat-x      body    background-color   DCDBD9  color   2C2C2C  font  normal 100  Cambria  Georgia  serif     lt  style gt    Sample html file    lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01  EN  gt    lt html gt   lt head gt     lt meta name  generator  content  HTML Tidy for Mac OS X  vers 31 October 2006 - Apple Inc  build 15 6   see www w3 org  gt      lt title gt Test Html File lt  title gt     lt link rel  stylesheet  href  mystyle css  type  text css  gt   lt  head gt    lt body gt     lt h1 gt Achieve sentence with Skynet  READ MORE lt  a gt  lt  h1 gt   lt  body gt   lt  html gt    After the first loading it will work in Chrome and then go back to CSS file comment the html entry  so your modified CSS will be    lt style type     text css     gt     html         background-color  000000        background-image url  bg png          background-repeat repeat-x        body       background-color   DCDBD9      color   2C2C2C      font  normal 100  Cambria  Georgia  serif            lt  style gt    Clearly seems to be bug in webkit  Saw the same behavior in Safari as well  Thanks for sharing the html information  have been hunting around forever of why the body tag was not working    The final output is something like this

[css] Issue with background color and Google Chrome

Examples related to css

Examples related to google-chrome