WordPress.org

Support

Support » How-To and Troubleshooting » CSS / Picture Overlays?

CSS / Picture Overlays?

  • Hello there!
    My blog is running and works (kinda – I am still new to wordpress) and I would like to know something special:

    Some sites have in top right or left corner a small graphic with a serious or funny phrase (like: “now 100% ad free” or “with juice”).

    How can I add a graphic into one of the corners so that it stays there even if the user scrolls down? I know I have to do this in CSS but I cannot figure out how to!?

    Maybe someone can help me!?
    Thanks a lot!
    With best regards,
    Rene

Viewing 10 replies - 1 through 10 (of 10 total)
  • body {
    background-image: url('http://example.com/image.png');
    background-position: top right;
    background-attachment: fixed;
    }

    The key there is the background-attachment property.

    Another way to do it if you are already using a body background image is to have a div that you apply the background image to and absolute position top left or top right depending on what you are after.

    Thanks for the help so far…

    Okay this might sound stupid but where do I have to place the css tag?

    Can I just put it into a <style></style> tag into the header.php?

    I have created a test graphic called “content.png” which I placed into “http://www.yochitosway.de/wp-content/themes/unsleepable/images/content.png”. How do I display the graphic now?

    Cheers,
    With best regards,
    Rene

    Okay I have added to code into the css file and it works, but the image is displayed several times (see http://www.yochitosway.de).

    Plus I would like to have it over the background because I would like to have another pattern shown as the new grey background!

    try assigning “no-repeat” to your background image.
    As for having it over the background, try the separate div approach I suggested.

    Thanks for the tip, but… I tried the div container approach but it destroys my theme completely.

    That’s what I tried:

    In the CSS file:

    #overlay {
    background-image: url
    (‘http://www.yochitosway.de/wpcontent/themes/
    unsleepable/images/content.png’);
    background-position: top right;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }

    Than I added a <div id=”overlay”> right behind the <body> tag in the header.php but it has completely destroyed the theme.

    How can I change this!?
    With best regards,
    Rene

    I can’t do it for you. Sorry.

    It should not “completely destroy” your theme. Your div should be closed, I dont’ know if you closed it. If there is no text in the div, try adding a &nbsp;. Don’t forget to add a height and width in your css declaration.

    The DIV was closed, though I didn’t add a  . The problem is that although I have added a width and height into the #overlay a greyish half transparent image is laid over 70% of the screen (you can still see the blog). That’s not what I wanted – I don’t get it…!

    Shouldn’t the overlay DIV you made be inside the body tag, maybe I read it wrong, but it sounds like you put the tag outside of the body.

    Yeah it is in the body tag – that’s what I meant!I think the problem is that it doesn’t work because of the Lightbox thing.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘CSS / Picture Overlays?’ is closed to new replies.