Background image behind text area

Community Forums Forums Design Tips and Tricks Background image behind text area

This topic is: not resolved

Tagged: ,

This topic contains 14 replies, has 3 voices, and was last updated by  AC 1 year, 10 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #20868

    mpierich
    Participant
    Post count: 11

    Hi,

    I’m using Genesis/Prose for a while now, and liked it because of the design controls.

    I ran across a site with a cool design that I’d like to use, but I’m sure it was a top-dollar job.  I’m an amateur and do my own sites for lack of bread, as they said in “Hair”.  :)

    Anyhow, this is a graphic on the background layer that extends above and to the left of the main body of a page.  The effect is that the image appears to be behind the body/text area.

    Here’s the example: http://www.empoweredsoul.com/

    I think I could do this in  Prose… except that I would need space _above_  the main body, where the header usually is.  Is there an easy way to lower the body area of a page (or add background area above it)?

    TIA

    #20876

    mpierich
    Participant
    Post count: 11

    Hmmm… wondering if I can make a high header space, and put part of the image directly on the header, then match the background image to th emissing portion on the header image.  Make sense?  But I would need to get rid of the padding between the header image and the extreme edge of the main body, and I have no clue about that.  Opinions? Suggestions?  TIA.

    #20877

    AC
    Blocked
    Post count: 7712

    Can you provide a link to your site so we can see what you have?

    #20879

    mpierich
    Participant
    Post count: 11

    Sure, mine is pretty much a standard Prose setup.

    http://www.healedspirit.com/

    #20882

    AC
    Blocked
    Post count: 7712

    Prose is a beast! I’m not good with that at all, but after looking at you site – look for this in your style.css (I think for Prose that’s where it’s at). But you would just increase the 15px in the margin to say 150 or 175. It will bring it down. So you can add a custom background image like her’s and then edit this just to get started.

    #wrap {
    background-color: #FFFFFF;
    border: 1px solid #E7E4E4;
    border-radius: 0 0 0 0;
    margin: 15px auto 0;
    padding: 10px;
    }

    #20889

    wendycholbi
    Participant
    Post count: 120

    In Genesis –> Design Settings –> Wrap –> Top Margin, change the 15px to 150px and see how that looks. You will probably also need to change both the padding and the border (in the same Design Setting) to 0 (zero) to avoid a white background strip interrupting your image.

    If you’re going to add any code snippets like the above, paste them into Genesis –> Custom Code –> Custom CSS, instead of making any changes to style.css.

    Code that’s added to Genesis –> Custom Code –> Custom CSS will override the Design Settings, so it’s always best to look for a Design Setting that does what you want, and only add code to Custom CSS if you want to do something that isn’t covered by the Design Settings.

     


    I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

    #20890

    AC
    Blocked
    Post count: 7712

    Wow @wendycholbi, Prose really is a beast! I’ll have to install it on a test and play with it. It’s nothing like the other themes.

    #20894

    wendycholbi
    Participant
    Post count: 120

    Personally, I think Prose is the unsung hero of all Genesis themes. The Design Settings in combination with the Custom Code fields make it super-powerful…and much easier for beginners to customize their sites (no need to make a child theme, or modify core theme files).

    But you’re right that those very features make it different from all other Genesis themes (great power –> great responsibility, blessing/curse, yada yada…).

    :)


    I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

    #20983

    mpierich
    Participant
    Post count: 11

    Thanks to  y’all.  I’ll be trying this stuff out and let you know how it turned out!

    Thanks again.

    #20995

    mpierich
    Participant
    Post count: 11

    OK great, I got the text body lowered and it works great!  I didn’t even realize what those particular controls were for.  :)

    Now to get the bg image lined up with the header part.  I’ll post a link when I’m finished.

    #21043

    wendycholbi
    Participant
    Post count: 120

    Glad it worked for you, Michael! I’m looking forward to seeing what it looks like when you’re done — seeing someone trick out Prose into a unique creation is one of my favoritest things.


    I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

    #21064

    mpierich
    Participant
    Post count: 11

    Here’s a first rough effort.  The bg is one big png that needs to be wider.  The top of the header area is too low here.  The cutout is not good, just for practice.  The yellow shows the lack of border in the header area.  Trickiest part will be aligning the bg partial image with the header partial image.  Wish there was a way to get coordinates off a web page.

    http://healedspirit.com/test/

    compared to hers at

    http://www.empoweredsoul.com/

    #21079

    wendycholbi
    Participant
    Post count: 120

    Are you going to actually need the header area for something in addition to your site name/title (for instance, were you thinking of having a signup widget like the one at Empowered Soul)?

    Just thinking out loud here and trying a few things with Firebug, it occurred to me that you could set the header height to 0px (would probably also need to set .header-image #title-area to 0px in height in Genesis –> Custom Code –> Custom CSS), place your site name and tagline into the background image itself, and eliminate the need to align a header bg with the page bg.

    If you did that, you could use one of the Genesis Hooks (genesis_before or genesis_before_header — see the Visual Hook Guide and the Genesis Hook Reference; you can add HTML and PHP to any of these hooks with the Genesis Simple Hooks plugin) if you needed to replace the header-right widget area.

    But please ignore these ideas if they don’t work for you. There’s always more than one way to do something, especially in Genesis/Prose/WordPress, and I’m just brainstorming for fun, to see if I could figure out a way to avoid the aligning-two-backgrounds issue.


    I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

    #21086

    mpierich
    Participant
    Post count: 11

    Thanks, good ideas.  Even tho I’m a layman, once I’m made aware of tools like you’ve given me I can usually play with it pretty well.

    You’re right, and also I want to get the body higher than I have it now so I don’t lose so much “above the fold” real estate.

    Many thanks to both of you.

    #21087

    AC
    Blocked
    Post count: 7712

    I see you are getting the hang of it @mpierich!

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.