Title: Image above ‘content’ Last modified: August 19, 2016 --- # Image above ‘content’ * [elliotowen](https://wordpress.org/support/users/elliotowen/) * (@elliotowen) * [16 years, 4 months ago](https://wordpress.org/support/topic/image-above-content/) * Hello, I am trying to put an image above the content and below the header in my theme but am having trouble doing so. The image can sit within the content div but needs to appear at the top of it, I need the image to be either the wide version or not depending on whether the sidebar is there or not. In header.php it defines either the wide bg or not so I think the image I want to put in should go here as well but Im not sure of the syntax. * So basically, I want to add and image above the content background as defined below which will only repeat once in Y to nicely round off the current hard edge of the background. * ``` #page { background: url("/images/byelliotowen-bg-ltr.png") repeat-y top; border: none; } #page { background: url("/images/byelliotowen-bg-wide.png") repeat-y top; border: none; } ``` Viewing 8 replies - 1 through 8 (of 8 total) * [esmi](https://wordpress.org/support/users/esmi/) * (@esmi) * [16 years, 4 months ago](https://wordpress.org/support/topic/image-above-content/#post-1316987) * A link to your site might help. * Thread Starter [elliotowen](https://wordpress.org/support/users/elliotowen/) * (@elliotowen) * [16 years, 4 months ago](https://wordpress.org/support/topic/image-above-content/#post-1316989) * [http://byelliotowen.com](http://byelliotowen.com) – in dev obviously. You can see it says ‘columntop’ which is the alt attribute of the img tag I put in the index and where the image shoudl be. * [esmi](https://wordpress.org/support/users/esmi/) * (@esmi) * [16 years, 4 months ago](https://wordpress.org/support/topic/image-above-content/#post-1317000) * You could so this via the classes added to the `` tag using pure CSS. Something like: * ``` .contenttop { width:570px; height:30px; background:url(images/byelliotowen-columntop.png) repeat-x; } .single .contenttop { width: 450px; } ``` * added to style.css * Thread Starter [elliotowen](https://wordpress.org/support/users/elliotowen/) * (@elliotowen) * [16 years, 4 months ago](https://wordpress.org/support/topic/image-above-content/#post-1317016) * cool, I think that got it. I will add some padding to the content background so that the top image sits above it then its perfect. * Thanks a lot esmi. * [esmi](https://wordpress.org/support/users/esmi/) * (@esmi) * [16 years, 4 months ago](https://wordpress.org/support/topic/image-above-content/#post-1317018) * Glad I could help. 🙂 * Thread Starter [elliotowen](https://wordpress.org/support/users/elliotowen/) * (@elliotowen) * [16 years, 4 months ago](https://wordpress.org/support/topic/image-above-content/#post-1317025) * Actually, Im not getting the top image in the ‘single’ view. View with the sidebar is fine(narrowcolumn?) Did I understand you correctly with the below. * FYI – Im modifying the default WP theme. * index.php * ```
``` * style.css * ``` .contenttop { width:860px; height:32px; background:url(http://byelliotowen.com/wp-content/themes/byelliotowen/images/byelliotowen-contenttop.png) repeat-x; } .single .contenttop { width:860px; height:32px; background:url(http://byelliotowen.com/wp-content/themes/byelliotowen/images/byelliotowen-contenttop-wide.png) repeat-x; } ``` * [esmi](https://wordpress.org/support/users/esmi/) * (@esmi) * [16 years, 4 months ago](https://wordpress.org/support/topic/image-above-content/#post-1317168) * You need to add: * ```
``` * to your single.php template. Check through the other templates as well – archive. php, archives.php, image.php, links.php, page.php and search.php. * Thread Starter [elliotowen](https://wordpress.org/support/users/elliotowen/) * (@elliotowen) * [16 years, 4 months ago](https://wordpress.org/support/topic/image-above-content/#post-1317223) * Ok, that worked a treat. Thanks again. * What do i need to do to get a similar result with the footer? At the moment I dont think the footer ‘knows’ whether the content is using a narrow or a wide column. I have tried putting a div in footer to be added after the WP footer content but the one is displayed all the time. See below. * in style.css * ``` #footer { background: #efefef url('images/byelliotowen-bg-ltr.png'); background-repeat: repeat-y; border: none; } .contentbottom { width:860px; height:20px; background:url(http://byelliotowen.com/wp-content/themes/byelliotowen/images/byelliotowen-contentbottom.png) repeat-x; } .single .contentbottom { width:860px; height:20px; background:url(http://byelliotowen.com/wp-content/themes/byelliotowen/images/byelliotowen-contentbottom-wide.png) repeat-x; } ``` * footer.php * ```
``` Viewing 8 replies - 1 through 8 (of 8 total) The topic ‘Image above ‘content’’ is closed to new replies. ## Tags * [content](https://wordpress.org/support/topic-tag/content/) * [header](https://wordpress.org/support/topic-tag/header/) * [image](https://wordpress.org/support/topic-tag/image/) * [on top](https://wordpress.org/support/topic-tag/on-top/) * 8 replies * 2 participants * Last reply from: [elliotowen](https://wordpress.org/support/users/elliotowen/) * Last activity: [16 years, 4 months ago](https://wordpress.org/support/topic/image-above-content/#post-1317223) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics