Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 3, 2017 at 10:52 am #754955
    Daniel

    Hi,

    I am trying to position an image in the footer with some overlap on the main content above.

    Here is a screenshot of what I’m trying to achieve: http://daan.me/uploads/Screen%20Shot%202017-03-03%20at%2009.48.46.png
    Here is my result: http://daan.me/uploads/Screen%20Shot%202017-03-03%20at%2009.50.56.png

    I’m trying to use a background image with: 

    
#footer {
    background-image: url(/wp-content/uploads/2017/02/logo.png);
    background-repeat: no-repeat;
    background-position: 1130px -25px;

    I’ve also set the z-index for the footer to 0, but without any result. Can you help me? Link it in the private section.

    Thanks! Daniel

    • This topic was modified 7 years, 8 months ago by Daniel. Reason: added site in private section
    March 4, 2017 at 9:14 am #755557
    Rikard

    Hey Daniel,

    You won’t able to do that if you set it as a background image. Try adding it to one of your widgets instead and give it an id, then try CSS like this:

    #your-image {
  position:absolute;
  top:0;
  left:0;
}

    Best regards,
    Rikard

    March 4, 2017 at 11:09 am #755574
    Daniel

    Hey Rikard,

    Thanks for that. I already tried it with adding the image to a widget but without any luck. Now I’ve removed the background-image and put the image back in a footer widget. What happens if I use the position: absolute; is that the image won’t show. If I change it to relative, the image shows but the top and left controls stop working.

    Regards,
    Daniel

    PS: +1 for weekend responses, thanks!

    • This reply was modified 7 years, 8 months ago by Daniel.
    March 6, 2017 at 6:25 am #756168
    Rikard

    Hi,

    The absolute position basically means you can place it anywhere on the page, you will have to change the values top and left to position it properly. You could also to add an image to a 1/1 element above the footer and give the element a negative bottom margin to see if that works out.

    Best regards,
    Rikard

    March 6, 2017 at 8:42 am #756227
    Daniel

    Hi Rikard,

    Thanks. If you take a look at the screenshot (in private section) you’ll see that I’ve placed it in the footer with the CSS that you gave me. But the image doesn’t show up. If I remove the absolute positioning (by using the developer tools in the browser) then the image shows but I have no control over the positioning.

    The image in a 1/1 element is not an option because I want to show it on each page (except homepage).

    Hope you can help!

    Regards,
    Daniel

    March 7, 2017 at 7:05 am #756789
    Rikard

    Hi,

    Ok, thanks for the feedback. You will see the image if you add this to Quick CSS:

    #footer #text-6 {
    overflow: visible !important;
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.