WordPress.com

I just set up a free WordPress account with a paid account in mind, but there's one particular thing I need to figure out how to do in the CSS first; how to get the background of the blog transparent, so the background picture shows through a little. If you take a look at stealing-light.blogspot.com, that'll give you an idea of the kind of thing I'm trying to do; a black fill for the blog, with a background image just showing through.

I've been editing a pre-existing template on WordPress, which has this code:

background:#000000 url('http://stuff.pyzam.com/layouts/img/s/c/ahscifi.jpg') repeat-x;
background-attachment:fixed;
background-position:bottom left;
background-repeat:no-repeat;
font-family:Arial, sans-serif;
color:#4A4A49;
text-align:center;
voice-family:inherit;
font-size:small;
margin:0;
padding:0;
}

html>body {
font-size:small;
}

p {
font-size:1em;
line-height:1.5em;
margin:1.2em 0;
}

ol,ul {
font-size:1em;
line-height:1.5em;
margin:1.2em 0 1.2em 2em;
padding:0;
}

h1,h2,h3,h4,h5,h6 {
font-family:Verdana, serif;
margin:1.2em 0 0;
}

h1,h2 {
font-size:1.5em;
}

h3 {
font-size:1.4em;
}

h4 {
font-size:1.3em;
}

h5 {
font-size:1.2em;
}

h6 {
font-size:1.1em;
}

a:link {
color:#497CA7;
}

a:visited,a:active {
color:#6E7CA7;
}

a:hover {
color:#7599B7;
text-decoration:none;
}

input,textarea,select {
background-color:#000000;
color:#4A4A49;
font-size:1em;
font-family:Arial, sans-serif;
}

blockquote {
border-left:4px solid #888685;
margin:0 20px;
padding:0 20px;
}

small {
font-size:0.92em;
}

code {
font-size:1.1em;
font-family:"Courier New", Courier, monospace;
color:#666;
}

form {
border:0;
margin:0;
padding:0;
}

a img {
border:0;
}

#wrapper {
width:760px;
color:#ffffff;
background:transparent;
font-size:0.9em;
text-align:left;
-moz-opacity:0.6px;
margin:auto;
}

I'm just sticking to the moz opacity for testing purposes since I'm viewing the results in firefox. If I take out the background:transparent tag and keep in all the opacity details, the blog remains stubbornly opaque. If I put in the background:transparent tag, it becomes completely transparent, except for the text.

I'm no CSS expert, but if anyone's got an idea of a way through this, I'd be extremely grateful.

I don't know if these will be helpful or not as I'm no CSS guru:

http://css-tricks.com/css-transparency-settings-for-all-broswers/
http://www.jadwigo.nl/tools/transparency/index.html

You should be able to make the transparency thing work with the CSS in the link that thesacredpath provided, though I've never been able to get IE to do it properly.

Okay, a bit of an update on this: I changed the them to Andreas04, because it's relatively uncomplicated.

I took the 'body' code and changed it to this:

body {
font:76% tahoma,verdana,sans-serif;
background:url('http://stuff.pyzam.com/layouts/img/s/c/ahscifi.jpg');
text-align:center;
margin:0;
padding:0;
}

Basically simply adding in a different URL for a test image I want to show - slightly - through the background of the actual blog.

Next, I went to this piece of code:

#container{
width:92%;
min-width:760px;
padding:0 20px;
margin:0 auto;
background:#f0f0f0 url(images/contentbg.png) repeat-x;
color:#333;
text-align:left;
border-left:1px solid #eef;
border-right:1px solid #eef;
}

And changed it to:

#container{
width:80%;
min-width:760px;
padding:0 20px;
margin:0 auto;
background:#f0f0f0;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
text-align:left;
border-left:1px solid #eef;
border-right:1px solid #eef;
}

... adding in, as you can see, the opacity filters for different browsers, the intention being to 'fade' the background of the blog over the referenced image. This works fine in blogger, but I'll be damned if I can get it to work in my so-far free WordPress account when I preview my alterations to the CSS. I'm really just about ready to give up on this one; the only thing that appears to affect the background at all is the 'background:transparent;' tag, except of course that merely makes it COMPLETELY transparent, as opposed to just partially.

I've tried a million variations, taking things out, putting them in, altering them, trying to see what happens. This is the only trick I can't get going somehow. If anyone still has any idea just where I'm going wrong, I'd seriously appreciate it.

Ooops, Sorry - I forget the .html suffix in my Link. Here is the correct one:

Mandarin Design - CSS Opacity & Transparent Tricks

Greating from Germany

Shanky-TMW</A>