Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am trying to create a post that consists of a background image with images over the top of it.

The idea is that the top images are links overlay on the background.

I have used the following css:

    #costume { 
background-image :url('http://localhost/wp-content/plugins/custom_costume_plugin/images/background.jpg');
position: absolute;
background-attachment:fixed;
height: 1190px;
width: 1500px;
top: 400px;
background-repeat:no-repeat;
}

#lefthand {
position: absolute;
height: 38px;
width: 88px;
top: 400px; 
left: 600px;
text-decoration: none;
}

#righthand {
position: absolute;
height: 38px;
width: 88px;
top: 400px; 
left: 200px;
text-decoration: none;
}

#head {
position: absolute;
height: 38px;
width: 88px;
top: 31px;
left: 400px; 
text-decoration: none;
}

#chest {
position: absolute;
height: 38px;
width: 88px;
top: 200px; 
left: 400px;
text-decoration: none;
}

#legs {
position: absolute;
height: 38px;
width: 88px;
top: 600px; 
left: 400px;
text-decoration: none;
}

#feet {
position: absolute;
height: 38px;
width: 88px;
top: 800px; 
left: 400px;
text-decoration: none;
}

The post consists of the following HTML:

    <div id="costume"> 
    <div id="lefthand">
    \\(Link to image)
    </div>
    <div id="righthand">
    \\(Link to image)
    </div>
    <div id="head">
    \\(Link to image)
    </div>
    <div id="chest">
    \\(Link to image)
    </div>
    <div id="legs">
    \\(Link to image)
    </div>
    <div id="feet">
    \\(Link to image)
    </div>
    </div>

The image inside the lefthand div is displaying ok but there is no background image in the post for the costume div.

I can see the stylesheet in view source.

What am I missing?

share|improve this question
    
Just in case someone asks I have 'wp_register_style('custom_costume_plugin', plugins_url('custom_costume_plugin/style.css')); wp_enqueue_style('custom_costume_plugin');' in the plugin. –  Gathris Dec 18 '13 at 15:50
    
What have you done to debug it? Does your stylesheets show up in view source? Do they link to the correct place? Is the background image linked correctly? Google built in developer tools and see if the browser your using has them, which will come in handy. This might not be specifically a Wordpress issue but a HTML / CSS issue and would be better on StackOverflow. –  Howdy_McGee Dec 18 '13 at 16:19
    
@Howdy_McGee Using firebug for firefox I can see the stylesheet has been included and there is a style for the "lefthand" div but not the "costume" div. When I try to create the style in a single page on my PC the background works fine so I assumed it was a wordpress issue. –  Gathris Dec 23 '13 at 18:08
    
I currently don't see why it would be a Wordpress issue, but it could be. Make sure you are updating the stylesheet correctly and those changes stick, so that when you reopen it those same styles are there. View the source on your styles sheet (from the browsers viwepoint) and make sure that the browser sees those same styles you set. –  Howdy_McGee Dec 23 '13 at 20:15
    
Yes the stylesheet is showing up in view source. If I look at the css in firebug I can see the stylesheet but it only contains the entry for the "lefthand" div and not the "costume" div. –  Gathris Dec 24 '13 at 10:49

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.