WordPress.org

Ready to get started?Download WordPress

Forums

CSS / Picture Overlays? (11 posts)

  1. yochito
    Member
    Posted 7 years ago #

    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

  2. maerk
    Member
    Posted 7 years ago #

    body {
    background-image: url('http://example.com/image.png');
    background-position: top right;
    background-attachment: fixed;
    }

    The key there is the background-attachment property.

  3. vavroom
    Member
    Posted 7 years ago #

    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.

  4. yochito
    Member
    Posted 7 years ago #

    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

  5. yochito
    Member
    Posted 7 years ago #

    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!

  6. vavroom
    Member
    Posted 7 years ago #

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

  7. yochito
    Member
    Posted 7 years ago #

    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

  8. vavroom
    Member
    Posted 7 years ago #

    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.

  9. yochito
    Member
    Posted 7 years ago #

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

  10. Brendan
    Member
    Posted 7 years ago #

    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.

  11. yochito
    Member
    Posted 7 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags