Hi Maria
Please share the link so we can have a look as difficult to provide a solution without seeing the issue.
Thank you, my website is http://www.medicinista.com. As you can see on the right i have a background image. I would like that image to overlap the header and the sidebar.
HI Maria
Do you mean you want to get rid of the white backgrounds that are so you can see the image behind the text areas?
Yes, so that the hair of the cartoon can be seen, but also her body on the sidebar. I want to be able to see the whole cartoon.
ok try this in your custom.css (please make sure not style.css as you will lose the customisation when you upgrade)
.entry, .site-header {
background-color: transparent;
}
Thank you..
I cant find the custom.css. I have bought a premium theme, does this matter? I only see the style.css
I would suggest you instal the following plugin then http://wordpress.org/plugins/simple-custom-css/
Okay, i tried that, but then the wide box with tekst becomes purple. And the image is still behind the sidebar as you can see.
maybe I misunderstood you intentions – I thought you wanted too remove the white backgrounds and turn it transparent. Please can you try explaining again… sorry
Im sorry i will explain again.
I want the cartoon to be seen completely. So that it overlaps the widget sidebar and the header. So that you see her head completely in the header and the rest of her body on top of the widget sidebar.
As if she is the toplayer of the site.
Z-index refers to stacking order of positioned elements on a page so you can’t apply it to background images. By default, the body background-image appears in the bottom stack of everything else.
I would suggest creating a child theme then adding and extra div to hold the image – that way you can position it and add a z-index. Do you know how to do this?
Child_Themes
The theme i have is already a child theme build on genesis framework.
But I have no idea how to add a div, and what it is exactly.
Can you please explain that.
try this and disable the background image as well
.site-inner:before {
content: url('http://www.medicinista.com/wp-content/uploads/2013/12/new.png');
position: absolute;
top: 0px;
margin-left: 450px;
width: 755px;
height: 875px;
float: right;
display: block;
overflow: hidden;
}
.footer-widgets, .site-footer {
position: relative;
}
I disabled the background image, and put the code in the custum css. As you can see the picture doesnt show up at all..
it’s the quote mark around the image
you can just chage it to
content: url(http://www.medicinista.com/wp-content/uploads/2013/12/new.png);
full code:
.site-inner:before {
content: url(http://www.medicinista.com/wp-content/uploads/2013/12/new.png);
position: absolute;
top: 0px;
margin-left: 450px;
width: 755px;
height: 875px;
float: right;
display: block;
overflow: hidden;
}
.footer-widgets, .site-footer {
position: relative;
}
