full size header

ekatuo · Member · Sep 14, 2014 at 5:42 am
Copy link

Add topic to favorites
Greetings.

I am building a new WP site with Opti Theme. I would like to add a header image, but when i use the customizer it adds the header image in a small rectangle inside the backgroud colour not full width etc.

Can I use CSS code to add a header image which covers the full section of the header.

(note I have no header image set at the moment since it did not work).

Kind Regards,

Tuomas

The blog I need help with is metodix.wordpress.com.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Sep 14, 2014 at 3:38 pm
Copy link
Hi there, at Appearance > Header, the stated best size for a header image in Opti is 1100px x 150px. I inserted a header that size on my test site and it looks like this: https://cloudup.com/cTvF183FN-h/f . What size is the image you are trying to use?
ekatuo · Member · Sep 14, 2014 at 3:57 pm
Copy link
Hi.

Thanks for your reply. My header image size is 1100 × 187.
I would like to postition my image “in header” as you are using “below navigation”. Now my image fills only part of the area that is why I think a CSS code is needed?

I placed the image in the header so you can see how it looks now:

http://metodix.wordpress.com/

Any help with teh CSS?

I
thesacredpath · Member · Sep 14, 2014 at 4:14 pm
Copy link
Hi, the image doesn’t seem to exist as all I’m seeing is a blank spot that is 1062px x 1062px. It is reporting a 404 file not found error.
ekatuo · Member · Sep 14, 2014 at 4:18 pm
Copy link
Damn.

See it now? I imported it again to the media library and placed in the header?
thesacredpath · Member · Sep 14, 2014 at 4:22 pm
Copy link
Ok, I’m seeing it in the header area now. Do you want that behind the title/site description/search box? If so, we can add the image from within the CSS instead of through Appearance > Header.
ekatuo · Member · Sep 14, 2014 at 4:26 pm
Copy link
Yes! Thats exactly what I want.

I also want to add a header image with the site title in the image, but I will do that later. This is just a test image from our old website without the title.

So later I want to disable the site title and descripiton and just add an image with the title. Is that possible as well?
thesacredpath · Member · Sep 14, 2014 at 4:36 pm
Copy link
Ok, remove your existing header at Appearance > Header and add the following CSS which places the image behind the title/description and search box. I’ve added a bit of right margin on the search box so it isn’t right up against the right edge of the image.
```
#branding {
    background: url("http://metodix.files.wordpress.com/2014/09/cropped-header_background3.png") no-repeat scroll center top transparent;
    padding-bottom: 59px;
}
#masthead form.searchform {
    margin-right: 35px;
}
```
When you go to replace the image with the one with the site title and tagline, we will have to do a couple more things so that we can keep the title/image as a link to your home page.
ekatuo · Member · Sep 14, 2014 at 4:47 pm
Copy link
Getting there.

The image is at the right place now, but I would want it to stretch right to the sides. I have a 1600 x 900 screen on my laptop so maybe its that, but I might not be the only one.

Looks good on my Tab…
thesacredpath · Member · Sep 14, 2014 at 5:14 pm
Copy link
Ok, what we could do instead then is add the image to #masthead, which spans the entire width of the browser window. What you would then need to do is use a header image that is about 2000px wide or wider so that if someone has a very wide monitor and has their browser window very wide, they won’t see any blank at the left or right. Remove the code I gave before and replace it with the following. I’ve set a blue color for the background color in the background declaration that matches the right edge of your header image so that it blends better. There is a slight difference in color since I’ve made the color a “websmart” color so that all browsers and systems can display that color.
```
#masthead {
    background: url("http://metodix.files.wordpress.com/2014/09/cropped-header_background3.png") no-repeat scroll center top #116688 !important;
}
#branding {
    padding-bottom: 59px;
}
```
ekatuo · Member · Sep 14, 2014 at 5:28 pm
Copy link
Ok, thanks.
That seems to work with a wider image. I tested with a random header image from the web and it worked.

So to be clear there is no way to stretch the existing image since I would prefer that? Image quality loss is no problem. You can check our other website with the same header image to understand what I am after (thats not a WP -page).
https://edelfoi.fi/

I would like to get the similar design. Using the existing header image would be most convinient.
thesacredpath · Member · Sep 14, 2014 at 5:34 pm
Copy link
Since you aren’t worried about a degradation in image quality, replace the #masthead rule with this which sets a background size of “cover” to make it stretch to fill the area.
```
#masthead {
    background: url("http://metodix.files.wordpress.com/2014/09/cropped-header_background3.png") no-repeat scroll center top / cover #168 !important;
}
```
ekatuo · Member · Sep 14, 2014 at 5:43 pm
Copy link
Thanks a lot.
That should do it for now.

The image degrades somewhat, but we will make an new wider header image if that bothers too much. I know how to use that option as well.

I will get back to the issue when I get the site title/logo fixed to the header image, but thanks for these instructions!
thesacredpath · Member · Sep 14, 2014 at 5:47 pm
Copy link
You are welcome, and if you have any problems, you know where we are. :)

No items found.