Apparition Theme-Center the Header Image-Full Width

[Andy Kettle]

Hello
Working with the Apparition child theme on a new website

rocketfreshexpress.com

I have a fill width image 1140 * 120
I want to center it on the theme but it appears left justified.
I had a look thru the forum but did not see any posts relevant to the theme.
Any Ideas ?

Thanks
Andy

http://www.rocketfreshexpress.com

[bandj]

Instead of adding top center to background-position, just add it to the background after the image url.

[Andy Kettle]

I'm still working on this one
trying to get Header image to line up center instead of left justified.

Is the code below, not telling it to do just that or what am I missing

#header {
background-position:top center !important;
background-color: #111;
min-height: 120px;
overflow: hidden;
width: 100%;
}

The image is in the media section and loaded via the header section in appearance.

The fact that there is not 20 questions about this in the forum would tell me I am missing something very straight forward.

Andy

[lizbarnett]

I am having the same issue! It happened after I updated to Genesis 2.0.

---

—
Liz Barnett http://www.LizBarnett.me

[lizbarnett]

PS The site I am working on is http://www.JenWPhotography.com

---

—
Liz Barnett http://www.LizBarnett.me

[lizbarnett]

I've been messing around for a few hours now with the CSS and am not figuring it out. 🙁 Still working on http://www.JenWPhotography.com - any help would be greatly appreciated. Thanks!

---

—
Liz Barnett http://www.LizBarnett.me

[Andy Kettle]

Liz
I ended up talking to Support on it and here is the fix I got below.

Thanks
Andy
grobyo.com

Hi Andy!

Thanks for asking! I'm sorry for the trouble and I'm very happy to help.

I would suggest changing that CSS to this:
#wrap #header {
background-color: #111111;
background-position: center center !important;
background-size: contain !important;
min-height: 120px;
overflow: hidden;
width: 100%;
}

That should resolve it for you!

Best,
Jennifer Baumann
Technical Support Advocate

[Sridhar Katakam]

Liz,

Use this CSS:

#wrap #header {
	background-position: center top !important;
}

---

Genesis Tutorials | Follow me on Twitter

[lizbarnett]

I used this:

/* Header
------------------------------------------------------------ */

#wrap #header {
background-color: #111111;
background-position: center !important;
background-size: contain !important;
min-height: 120px;
overflow: hidden;
width: 100%;
}

---

—
Liz Barnett http://www.LizBarnett.me

[lizbarnett]

I also have this issue:

I wanted it to have the black border all the way across so I could change the header (with logo in it) to be transparent.
http://www.studiopress.community/topic/apparition-upload-header-image-and-keep-full-banner-behind/

So I changed it to this:

/* Header
------------------------------------------------------------ */

#wrap #header {
background-color: #111111 !important;
background-position: center !important;
background-size: contain !important;
min-height: 120px;
overflow: hidden;
width: 100%;
}

---

—
Liz Barnett http://www.LizBarnett.me

[Author]

Posts