Help with header background image on Magazine theme

Community Forums Forums Design Tips and Tricks Help with header background image on Magazine theme

This topic is: resolved

This topic contains 3 replies, has 4 voices, and was last updated by  braddalton 1 year, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #57961

    Emma1202
    Participant
    Post count: 19

    I needed to make my header taller to accommodate my logo on the Magazine theme. I need it to be 960×230. 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 6×115 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/

    • This topic was modified 1 year, 2 months ago by  Emma1202. Reason: put in the correct url for site
    • This topic was modified 1 year, 2 months ago by  Emma1202. Reason: put in the correct url for site
    http://raleighheatingandairrepair.com/resizing-header-issues/
    #57978

    bandj
    Participant
    Post count: 184

    you can’t make it repeat twice and then stop. You could resize it to 12×230.


    #57998

    Rellek
    Participant
    Post count: 7

    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


    #57999

    braddalton
    Participant
    Post count: 10349

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

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

    [css]
    #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;
    }
    [/css]

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


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

You must be logged in to reply to this topic.