Title: Adding overlapping image Last modified: August 21, 2016 --- # Adding overlapping image * Resolved [maria1986](https://wordpress.org/support/users/maria1986/) * (@maria1986) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-overlapping-image/) * Hi there, * I would like to know if somebody could help me with making an image overlapping the header and sidebar of my blog. I tried using a z-index but it doesnt seem to work for me. Can anyone help me with the css code? * Kind regards maria. Viewing 15 replies - 1 through 15 (of 31 total) 1 [2](https://wordpress.org/support/topic/adding-overlapping-image/page/2/?output_format=md) [3](https://wordpress.org/support/topic/adding-overlapping-image/page/3/?output_format=md) [→](https://wordpress.org/support/topic/adding-overlapping-image/page/2/?output_format=md) * [salsaturation](https://wordpress.org/support/users/salsaturation/) * (@salsaturation) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-overlapping-image/#post-4449727) * Hi Maria * Please share the link so we can have a look as difficult to provide a solution without seeing the issue. * Thread Starter [maria1986](https://wordpress.org/support/users/maria1986/) * (@maria1986) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-overlapping-image/#post-4449729) * Thank you, my website is [http://www.medicinista.com](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. * [salsaturation](https://wordpress.org/support/users/salsaturation/) * (@salsaturation) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-overlapping-image/#post-4449739) * 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? * Thread Starter [maria1986](https://wordpress.org/support/users/maria1986/) * (@maria1986) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-overlapping-image/#post-4449740) * 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. * [salsaturation](https://wordpress.org/support/users/salsaturation/) * (@salsaturation) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-overlapping-image/#post-4449741) * 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; } ``` * Thread Starter [maria1986](https://wordpress.org/support/users/maria1986/) * (@maria1986) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-overlapping-image/#post-4449745) * Thank you.. * I cant find the custom.css. I have bought a premium theme, does this matter? I only see the style.css * [salsaturation](https://wordpress.org/support/users/salsaturation/) * (@salsaturation) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-overlapping-image/#post-4449748) * I would suggest you instal the following plugin then [http://wordpress.org/plugins/simple-custom-css/](http://wordpress.org/plugins/simple-custom-css/) * Thread Starter [maria1986](https://wordpress.org/support/users/maria1986/) * (@maria1986) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-overlapping-image/#post-4449751) * 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. * [salsaturation](https://wordpress.org/support/users/salsaturation/) * (@salsaturation) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-overlapping-image/#post-4449757) * 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 * Thread Starter [maria1986](https://wordpress.org/support/users/maria1986/) * (@maria1986) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-overlapping-image/#post-4449758) * 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. * [salsaturation](https://wordpress.org/support/users/salsaturation/) * (@salsaturation) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-overlapping-image/#post-4449774) * 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](http://codex.wordpress.org/Child_Themes) * Thread Starter [maria1986](https://wordpress.org/support/users/maria1986/) * (@maria1986) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-overlapping-image/#post-4449775) * 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. * [salsaturation](https://wordpress.org/support/users/salsaturation/) * (@salsaturation) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-overlapping-image/#post-4449782) * 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; } ``` * Thread Starter [maria1986](https://wordpress.org/support/users/maria1986/) * (@maria1986) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-overlapping-image/#post-4449784) * I disabled the background image, and put the code in the custum css. As you can see the picture doesnt show up at all.. * [salsaturation](https://wordpress.org/support/users/salsaturation/) * (@salsaturation) * [12 years, 4 months ago](https://wordpress.org/support/topic/adding-overlapping-image/#post-4449785) * 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; } ``` Viewing 15 replies - 1 through 15 (of 31 total) 1 [2](https://wordpress.org/support/topic/adding-overlapping-image/page/2/?output_format=md) [3](https://wordpress.org/support/topic/adding-overlapping-image/page/3/?output_format=md) [→](https://wordpress.org/support/topic/adding-overlapping-image/page/2/?output_format=md) The topic ‘Adding overlapping image’ is closed to new replies. * 31 replies * 3 participants * Last reply from: [maria1986](https://wordpress.org/support/users/maria1986/) * Last activity: [12 years, 3 months ago](https://wordpress.org/support/topic/adding-overlapping-image/page/3/#post-4450049) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics