• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Background image behind text area

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: not resolved

Tagged: background, Prose

  • This topic has 14 replies, 3 voices, and was last updated 10 years, 1 month ago by Anita.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • February 17, 2013 at 2:05 pm #20868
    mpierich
    Member

    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

    February 17, 2013 at 2:37 pm #20876
    mpierich
    Member

    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.

    February 17, 2013 at 2:41 pm #20877
    Anita
    Keymaster

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


    Love coffee, chocolate and my Bella!

    February 17, 2013 at 2:52 pm #20879
    mpierich
    Member

    Sure, mine is pretty much a standard Prose setup.

    http://www.healedspirit.com/

    February 17, 2013 at 3:12 pm #20882
    Anita
    Keymaster

    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;
    }


    Love coffee, chocolate and my Bella!

    February 17, 2013 at 4:02 pm #20889
    wendycholbi
    Member

    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

    February 17, 2013 at 4:06 pm #20890
    Anita
    Keymaster

    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.


    Love coffee, chocolate and my Bella!

    February 17, 2013 at 4:21 pm #20894
    wendycholbi
    Member

    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

    February 18, 2013 at 7:49 am #20983
    mpierich
    Member

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

    Thanks again.

    February 18, 2013 at 9:10 am #20995
    mpierich
    Member

    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.

    February 18, 2013 at 11:49 am #21043
    wendycholbi
    Member

    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

    February 18, 2013 at 1:09 pm #21064
    mpierich
    Member

    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/

    February 18, 2013 at 2:07 pm #21079
    wendycholbi
    Member

    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

    February 18, 2013 at 2:27 pm #21086
    mpierich
    Member

    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.

    February 18, 2013 at 2:29 pm #21087
    Anita
    Keymaster

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


    Love coffee, chocolate and my Bella!

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble