I have been fiddling with my Pytheas theme again. This time, I am trying to insert a 2-color gif (suitable for tiling) onto the backgrounds of my pages and posts. Note that I do not mean the background of the whole page. That is, and should remain, black. The site/sample-post in question is here.
I have investigated as extensively as I can given my coding deficiencies. Currently, I've been editing the styles.css file. I replaced this default code:
/* Body & Main
================================================== */
body { background: #eee url("images/main-bg.png") repeat; nowhitespace: afterproperty; font: 12px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body a { color: #f15a23 } /*main link color*/
body a:hover { text-decoration: none; color: #000 }
with this revised code, which I cobbled together with my hazy understanding of CSS.
body {
background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif") repeat; nowhitespace: afterproperty;
background-repeat: repeat;
background-color:rgba(255,255,255,0.0);
font: 12px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
My thinking was that I needed that rgba bit to ensure that the color is transparent (in case the texture was 'behind' it). I don't know. I was throwing darts. Maybe it's in the wrong place. Maybe it's just flat out wrong. :)
I turn to you more qualified folks to help me out. Thanks in advance for any guidance you can offer.
Rather than setting the CSS of your body element, try setting it on #main-content
Also, you only need the first line to achieve the effect you want:
#main-content {
background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif") repeat;
}
If you don't want the background of the whole page to be affected, but only the background of the WordPress page/post, you shouldn't be adjusting the background properly of the body element in your CSS, which would affect the entire HTML page, but rather of the element for which you want to apply the background, probably #main-content.
Try setting that background property on #main-content near line 24 of your CSS file instead, e.g.
#main-content {
background: url("http://longgame.org/wp-content/uploads/grid-paper-2color-start.gif") repeat;
}
I am trying to create a page with multiple background images, using this CSS code:
body {
background-image:url(../i/bg_bf.jpg), url(../../../../test.png) ;
background-position: top center, bottom left;
background-repeat:no-repeat;
padding-top:3px;
}
It works fine with Firefox, but does not show neither images in IE.
Any advice?
Multiple backgrounds/images aren't supported by IE, at least before IE9, they're a CSS3 feature, you can find them in the spec here with specifics here.
you might need to use wrappers
<body>
<div id="windowWrapper">
CSS:
body {
background-image:url(../i/bg_bf.jpg) no-repeat top center;
padding-top:3px;
}
#windowWrapper {
background-image:url(../i/test.jpg) no-repeat top center;
}
i'm making a splash image div that changes the background with different css class, here's rules i defined:
#splash {
height: 130px;
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
this works fine in firefox and chrome, but the background somehow doesn't show up in ie 6. The weird thing is, it works for the homepage class but not the projectspage class. so ie 6 seems to interpret these almost identical rule differently. i tried clear the cache, didn't help. i'm quite new to css and ie 6 hacks, so am i missing anythings here?
also another problem that's slightly related to this, it seems it doesn't work in firefox when there is space before the class, like "#splash .homepage", but somehow i see other people's websites using the css with a space. what could be the problem?
update:
i tried to reverse the order of the #splash.homepage and #splash.projectspage, then now projectspage works but not the homepage. It seems whatever is immediately followed by #splash is used.
here are some relevant css & htmls:
#splash {
height: 130px;
}
#splash.projectspage { background: #F7EECF url('images/splash_projects.png') no-repeat 0 0 scroll; }
#splash.homepage { background: #F7EECF url('images/splash_home.png') no-repeat 0 0 scroll; }
#splashtext {
padding: 53px;
height: 40px;
width: 450px;
}
#splashtext h2 {
color: #FFFFFF;
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
font-weight: normal;
font-style: italic;
}
#splashtext p {
color: #FFFFAA;
font-family: Calibri, Arial, san-serif;
font-size: 14px;
font-weight: normal;
margin-top: 10px;
font-style: italic;
}
<!-- splash, this one does not show -->
<div id="splash" class="homepage">
<div id="splashtext">
<h2>some header</h2>
<p>some description</p>
</div>
</div>
<!-- splash, this one shows -->
<div id="splash" class="projectspage">
<div id="splashtext">
<h2>some other header</h2>
<p>some other description</p>
</div>
</div>
IE6 does not support multiple combined selectors to select elements (#id.class or .class.class, etc). IE6 will ONLY recognize the last class/ID in your chain.
Details and example
However, in this case, as long as you only have .homepage and .projectspage on one element on the page, the background image should be showing up on the correct element.
I noticed that you are probably using .homepage and .projectspage to differentiate between two PAGES and the same ELEMENT on those different pages. A good practice is to put the class on the <body> element so you can use it to differentiate each page and their descendants.
<body class="homepage">
<div id="splash">
Then your CSS would be:
body.homepage div#splash { blah }
body.projectspage div#splash { blah }
Added benefit: you can now target any elements on a per page basis, not just the ones that you add ".homepage" or ".projectspage" to.
It's possible you're having an issue with the .png image files. IE6 cannot handle the transparency layer that is part of .png images, it simply renders any pixel with a transparent marker as a grey background.
As for the second part of your question, #splash.background is a significantly different rule than #splash .background. The first one (no space) refers to the element with id splash that also has a background class. The second rule (with a space) refers to any element of class background that is a child of the element with id splash. Subtle, but important difference.
Try taking out the quotes around your URLs in the background specifiers, or changing them to single quotes.
Why are you worried about ie6? Anyway it works in ie7 and ie8.
Are you sure that is not a problem with png? Try with a jpg or gif image.
I would bet that the problem is specifically to do with the IE6 misshandling of .pngs
To test, try replacing these graphics with a gif or jpg and check to see if the selectors are working correctly.
Once you've identified that it is a problem with pngs try using the Supersleight jQuery plugin.
I think using min-height property will sometimes work.
Try the below code.
#splash {
min-height:130px; /* first */
height:auto !important; /* second */
height: 130px; /* third */
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
Note: Please use the same order of css in #splash selector.
(I guess your projectspage is under a sub-directory of home-page?)
Try using absolute paths to each image in the CSS (eg. url("/images/splash_projects.png")) - it chould be that IE6 resolves images relative to the containing page instead of the CSS file (depends whether your CSS is inline or in an external file I suppose.)
I've got the same problem, and it's not PNGs.
e.g.
column2menu li { border-bottom : 1px solid;}
column2menu li.goats { border-bottom-color : brown;}
...works in IE6, but...
td#menu { background-repeat:no-repeat;
background-position:bottom right;}
td#menu.goats { background-image :
url(../images/goats.jpg);}
...doesn't.
But I found a solution for ie6 that works so far in FF, i.e.:
.tdgoats { background-repeat:no-repeat;
background-position:bottom right;
background-image : url(../images/goats.jpg);}
...so you use:
...and ie6 is happy
Thsi post looks OK where I'm typing it, but the preview in the blue box is a bit odd.
Somehow lines 2 and 3 got <h1>'d
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?
Never heard of it. Try:
html, body {
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
font-family: ...;
}
Ok guys, I found a solution,
. It's not great but does the trick with no side effects.
The HTML:
<span id="chromeFix"></span>
(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 =]
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.
I was able to fix this with:
html { height: 100%; }
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.
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.
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.
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;
}
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.
Google Chrome and safari needs a tweak for body and background issues.
We have use additional identifier as mentioned below.
<style>
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;}
</style>
<body id="body">
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.
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: "";}
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;
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.
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.]
It must be a WebKit issue as it is in both Safari 4 and Chrome.
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.
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
body, html {
width: 100%;
height: 100%;
}
Worked for me :)
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
<style type="”text/css”">
html {
background-color:#000000;
background-repeat:repeat-x;
}
body {
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
</style>
Sample html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.6), see www.w3.org">
<title>Test Html File</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
<body>
<h1>Achieve sentence with Skynet! READ MORE</a></h1>
</body>
</html>
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
<style type="”text/css”">
// 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;
}
</style>
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:
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.
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.)
IF you're still having trouble, you may try switching 'top' to 'bottom' in chromeFix above, and also a div rather than a span
<div id="chromeFix"></div>
style:
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; bottom: 0px; left: 0px; }