Help with header background image on Magazine theme

[Emma1202]

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/

[bandj]

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

[Rellek]

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

[Brad Dalton]

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