Need help? Check out our Support site, then


Opacity and faded backgrounds

  1. garygibsonsfwriter
    Member

    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.

  2. (1) What is the url for your wordpress.com blog? No one can help you if they cannot see what theme you are modifying.

    (2) Have you purchased the css editing upgrade or not?

  3. garygibsonsfwriter
    Member

    Hi, sorry about that - my wordpress blog is at http://garygibsonsfwriter.wordpress.com/, although I should say I haven't purchased the upgrade yet. I want to figure out if I can get around this one niggling problem with my test preview before I go the whole hog and get out the credit card.

  4. 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.

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

    I think you need to take out the 'background:transparent' line and replace it with 'background:#fff' or whatever colour you're using.

  6. garygibsonsfwriter
    Member

    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.

  7. I overworked on the same Problem without a complete solution. I think the Problem is, that all Chield Objects become opacity and this is never changable.

    I think, the best way to make the wrapper oapcity without fading Image Elements are: using the old Boxes Tricks with background & corner images in different Containers - and this made be seperate transparent.

    Otherwise if you only post Text, it works perfectly.

    I found many other and very tricky Information about opacity css & style Tricks on

    Mandarindesign Blog - Opacity Tricks

    Hope Iam a little bit handy with this, becausw my own CSS skills are not the best either.

    Greatings from Germany

    Shanky-TMW (http://blog.bubblespace.de)

  8. 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>

Topic Closed

This topic has been closed to new replies.