• 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 header …

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 header …

This topic is: not resolved

Tagged: background image, body, footer, header

  • This topic has 1 reply, 2 voices, and was last updated 2 years, 8 months ago by askdesign.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • August 11, 2019 at 6:31 pm #492936
    cjholbrook
    Participant

    Hi,

    I want a background image for my entire header/menu section. I'm on Infinity Pro. How can I do this?

    Also, I want a background image for my entire footer area. How can I do this?

    And I would like a background image on the sides of my body. Sort of like this: https://OuterLimitsLandSurveying.com. It has black around the main white copy.

    The site I'm working on is AmyJanece.com

    thanks so much for your help!!!!

    Cindy

    http://AmyJanece.com
    July 3, 2020 at 4:33 pm #499889
    askdesign
    Participant

    You need to add the "background-image" property to the .site-header, .site-footer, and .site-container classes.
    You may also need to add the "background-position" and "height" properties.

    ORIGINAL CODE

    .site-header {
        background-color: #fff;
    }
    
    .site-footer {
        border-top: 1px solid #eee;
        line-height: 1;
        padding: 60px 0;
        text-align: center;
    }
    
    .site-container {
        -webkit-animation: fadein 1s;
        -moz-animation: fadein 1s;
        -ms-animation: fadein 1s;
        -o-animation: fadein 1s;
        animation: fadein 1s;
    }

    MODIFIED CODE

    .site-header {
        background-color: #fff;
        background-image: url(https://www.xyz.com/imagepath/imgename.jpg);
        background-position: -480px;
        height: 258px;
    }
    
    .site-footer {
        border-top: 1px solid #eee;
        line-height: 1;
        padding: 60px 0;
        text-align: center;
        background-image: url(https://www.xyz.com/imagepath/imgename.jpg);
        background-position: -480px;
        height: 258px;
    }

    You'll add the background image to the .site-container class, which may make the .site-inner area difficult to see. So you'll need to add a white (or another color) background:

    .site-container {
        -webkit-animation: fadein 1s;
        -moz-animation: fadein 1s;
        -ms-animation: fadein 1s;
        -o-animation: fadein 1s;
        animation: fadein 1s;
        background-image: url(https://www.xyz.com/imagepath/imgename.jpg);
        background-repeat:no-repeat;
    }
    
    .site-inner {
        clear: both;
        margin: 73px auto 0;
        max-width: 1280px;
        word-wrap: break-word;
        background-color: #fff; /* --- add this code --- */
    }

    Anne S. Katzeff
    Designer | Artist | Teacher

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