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('https://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.

    Thread Starter yochito

    (@yochito)

    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 “https://www.yochitosway.de/wp-content/themes/unsleepable/images/content.png&#8221;. How do I display the graphic now?

    Cheers,
    With best regards,
    Rene

    Thread Starter yochito

    (@yochito)

    Okay I have added to code into the css file and it works, but the image is displayed several times (see https://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.

    Thread Starter yochito

    (@yochito)

    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
    (‘https://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.

    Thread Starter yochito

    (@yochito)

    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.

    Thread Starter yochito

    (@yochito)

    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.

Tags