Lifestyle Pro How to use a larger header image

[cgrray]

I would like to use our header image. It is 976 X 208px. Where do I change the code to accommodate this?

[jdunsterville]

Hi, I did this on the Parallax theme by replacing the header image file with the larger image file. You can achieve this by uploading your new image (using the same filename as the old) via sftp.

[cgrray]

Thanks. I tried this and now the width is ok - it shows the full image width wise but the height is still cropped.
Any ideas?

[jdunsterville]

Sure thing. Just go to your editor and find the Title Area. This should be right below the header section.
Then just change the height value in the code below. Your code should look similar if not exactly the same.

/* Title Area
--------------------------------------------- */

.header-image .site-title > a {
	background-size: contain !important;
	display: block;
	height: 200px;  /*<<Change this number to your desired height. */
	text-indent: -9999px;
	max-width: 100%;
	
}

[cgrray]

This is what my title area looks like:

.title-area {
	float: left;
	width: 320px;
}

When I changed it to this:

.title-area {
	float: left;
/*	width: 320px;*/
	width: 976px;
	height: 208px;
}

It expands the header downward but not the image. It remains cropped height wise.

[jdunsterville]

Make sure you are adding the code to the .header-image

Go to the Genesis Theme Settings. Then find header. Make sure that "image-logo" is selected from the drop down box.
What this does is adds a body class of .header-image to your CSS file.

[cgrray]

Thanks. There is no header drop down box in my Genesis Theme Settings. I'm editing the CSS file in Dreamweaver. I made the change below and it worked.

.header-image .site-title a {
	float: left;
/*	min-height: 110px;*/
	min-height: 208px;
	width: 100%;
}

I appreciate your help.

[Author]

Posts