• 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

Help with header background image on Magazine theme

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 › Help with header background image on Magazine theme

This topic is: resolved

Tagged: background, header, image, magazine

  • This topic has 3 replies, 4 voices, and was last updated 9 years, 7 months ago by Brad Dalton.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 21, 2013 at 11:09 am #57961
    Emma1202
    Participant

    I needed to make my header taller to accommodate my logo on the Magazine theme. I need it to be 960x230. I changed the function.php file but as a result my logo now sits half on the original background, half on the cream colored band that lays above the navigation bar. http://raleighheatingandairrepair.com/resizing-header-issues/

    When I looked at the background image, I can see that it's 6x115 repeating horizontally I'm assuming:

    #wrap {
    background: url(images/wrap.png) repeat-x;
    margin: 0 auto;
    }

    How can I change the style.css file so that this background repeats horizontally but on two lines so that it ends up being 960 x 230?

    http://www.coolchangenc.com/

    http://raleighheatingandairrepair.com/resizing-header-issues/
    August 21, 2013 at 12:21 pm #57978
    bandj
    Member

    you can't make it repeat twice and then stop. You could resize it to 12x230.

    August 21, 2013 at 1:22 pm #57998
    Rellek
    Member

    Here is what I came up with to get what you are looking for. I had to remove the images/wrap.png and change the background color to black #000000 because the images/wrap.png is only 115px tall and it leaves a line through the middle of the header when you set it to repeat instead of the repeat-x that it was set at.

    First thing that you need to do is to go in and remove your logo from the Appearance >>>>Header section. We add it back in the css below.

    Go into your style.css and make the your code match what I have below and you should end up with what I have shown in the image below.

    .header-full-width #title-area, .header-full-width #title, .header-full-width #title a {
    	width: 960px;
    	margin: 0 auto;
    	
    }
    
    .header-image #title-area, .header-image #title, .header-image #title a {
    	display: block;
    	height: 250px;
    	overflow: hidden;
    	padding: 0;
    	text-indent: -9999px;
    	background: url(http://www.coolchangenc.com/wp-content/uploads/2013/08/cropped-Cool-Change-logo11.png) no-repeat ;
    }
    
    #header {
    	min-height: 250px;
    	margin: 0 auto;
    	overflow: hidden;
    	width: 100%;
    }
    
    #title-area {
    	float: none;
    	overflow: hidden;
    	padding: 20px 0 0;
    	width: 490px;
    }
    
    #wrap {
            margin: 0 auto;
    }

    You need to add the following to your style.css

    
    #header .wrap {
    	background: #000;
    	width: 100%;
    	margin: 0 auto;
    	height: 250px;
    }
    

    Let me know if this works out for you


    Rellek Designs

    August 21, 2013 at 1:23 pm #57999
    Brad Dalton
    Participant

    You'll also need to change the header values in your style sheet.

    This is what i used at the end of the file.

    #title-area {
    	float: left;
    	overflow: hidden;
    	padding: 20px 0 0;
    	width: 360px;
    }
    
    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    	display: block;
    	float: left;
    	height: 230px;
    	overflow: hidden;
    	padding: 0;
    	text-indent: -9999px;
    	width: 360px;
    }
    
    
    #header {
       	min-height: 230px;
    	margin: 0 auto;
    	overflow: hidden;
    	width: 960px;
    }
    
    
    #wrap {
    	background: #323232;
    }
    
    #inner {
    	background: #323232;
    }
    

    The easiest way to change the header background would be to open the wrap.png image in Photoshop and make it 230px in height.


    Tutorials for StudioPress Themes.

  • 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