Archived

This topic is now archived and is closed to further replies.

  • 0

Boxes don't show bg img


Question

Posted · Report post

Hi :-)

 

I am working on a site where I use boxes. I styled them with a background image and a fullwidth link. On the frontpage the are working just fine: http://version2manometer.wpforalle.dk/

 

but when I try to add them to the members ares they show the link - but not the background image! http://version2manometer.wpforalle.dk/skriverier/

 

But it is the exact same box-set?

 

What is happening?

 

Thanks,

Bolette

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

Hello Bolette,

 

I found:

body #box-diverse {
    background-image: url("./wp-content/uploads/2013/06/venstreboks-uden-tekst.png");
    background-position: left top;
    background-repeat: no-repeat;
    display: block;
    height: 103px;
    width: 292px;
}

That's incorrect CSS.  You should use the full URL, not a shortened version as ./.  It should be "background-image: url(".http://www.thefullURL.com/wp-content/uploads/2013/06/venstreboks-uden-tekst.png");" You also do not need to prefix it with body.

 

I'm not seeing a particular cause for this, except that no-where do I see any specific code for the a activity.

 

You should also use Firebug to go through the various levels, as some of the CSS is causing overlap.  You have 55px padding on either side, for example, of one element (below) that's bleeding into the next box.   See: 

body .fbox a {
    color: rgb(0, 0, 0);
    padding: 20px 55px 0;
}

It could be that because you add a link, that element pushes everything and makes the background vanish.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob

 

I haven't added the body - it is done after I put the 

 

#box-diverse {

background-image: url("./wp-content/uploads/2013/06/venstreboks-uden-tekst.png");
background-position: left top;
background-repeat: no-repeat;
display: block;
height: 103px;
width: 292px;
}

 

into the Custom CSS. 

 

And I can see the problem with the padding - but it doesn't explain why the same boxes in the same set is showing fine on the frontpage? 

 

 

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you Rob and Martin - it worked and after a few days of fretting about it, I guess I can live with the curiosity on why it worked to begin with on one page and not another..."the code works in mysterious ways" :-D

 

Share this post


Link to post
Share on other sites

Posted · Report post

As long as it works! That's what counts.  Happy to help!

Share this post


Link to post
Share on other sites