Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   Background image overlap (http://forum.bytesforall.com/showthread.php?t=20018)

jodybethw Mar 28, 2013 07:18 PM

Background image overlap
 
1 Attachment(s)
I'd like my site's logo (the big red tag) to sit at the top of the page but overlap the top of the content area like this:

Attachment 2295

Is this possible? If so, where do I place the image (I'm using CSS to do so)? If not, is there a workaround?

My URL: http://www.kimspersonalizing.com/

Many thanks!

lmilesw Mar 28, 2013 08:03 PM

Instead of having it as a background to the wrapper I would use it as logo image and then position with CSS.

jodybethw Apr 4, 2013 08:44 AM

Tried that, but the tag image is still falling beneath the white content area. The tag image is currently in the body div, but I realize it should probably be elsewhere. Just not sure where. To be clear, I want the tag image to overlap the white content area. Frustrated and very appreciative of any help!

juggledad Apr 4, 2013 09:15 AM

make it your logo image and let us know when you have done that and we can take a look again.

jodybethw Apr 4, 2013 09:41 AM

Done. Thank you!

lmilesw Apr 4, 2013 10:35 AM

Now just add a negative bottom margin using something like the following in the CSS Inserts section of the theme options.
HTML Code:

.logo {
    margin-bottom: -20px;
}


juggledad Apr 4, 2013 10:37 AM

try this: in the 'Configure Header Area' option add the following
HTML Code:

<div id="mytag"><img class="tag" src="http://www.kimspersonalizing.com/wp-content/themes/atahualpa/images/tag.png" /></div>
then add the following to the CSS inserts
HTML Code:

#mytag {height:150px;}
.tag {position: relative;}

you may want to position it left or right too.

jodybethw Apr 4, 2013 10:55 AM

Thanks juggledad, that is a workable fix. The only thing I can't figure out though, is how to make the rest of it work with this fix. For instance, I want to surround the white content area (layout + menu) with a box shadow. Is it possible within the Atahualpa options to create a div that wraps around both of these sections? See original concept image above for reference.


All times are GMT -6. The time now is 08:36 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.