• 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 for Balance

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 for Balance

This topic is: not resolved

Tagged: background, Balance

  • This topic has 3 replies, 2 voices, and was last updated 7 years, 8 months ago by emasai.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 13, 2015 at 11:21 am #152015
    jlph
    Participant

    I'd like to add an image for the background of Balance. I believe this is the code I need to use, but where should I add it in the css? This will make it so the image shows around the edges and under the nav menu with white behind the actual content in the post feed below the header, correct? Thanks!

    body {
    background-color: your image;
    }

    #inner {
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
    background-color: #fff;
    }

    May 13, 2015 at 12:01 pm #152026
    emasai
    Participant

    Wherever you add the image,

    background-color: your image;

    is for the background color only as it specifies. Use

    background: url(images/yourimagehere.jpg) no-repeat;
    The image will tile automatically unless you add the no-repeat.

    Try it in both tags and you will see which one suits you best.


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

    May 13, 2015 at 1:07 pm #152036
    jlph
    Participant

    Thanks! I decided I want the background image to appear underneath all the text and widget areas as well so I removed the code about the #inner. I would also like the background image to appear under the top of the header image/menu (so the menu items do not have a white background. What code can I add for that to happen? My header image file base layer is transparent so it should show through, correct?

    Thanks!

    May 13, 2015 at 1:12 pm #152040
    emasai
    Participant

    Theoretically yes if your image is a .png. You only needed to remove the background-color: #FFF; from #inner.

    A link to your site would be helpful if you require further advice.


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 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