Problems with changing header background

Hi!
Before writing here I’ve been searching for previous posts on the matter but I didn’t find the right solution.
I need to change the header adding a background image sized 1019x144.
I set the image under Appearance->Header and added this to my custom css

.header-image {
	margin-top: -144px;
}

I noticed though that following this procedure I completely covered the social icons, which are now disappeared. Also, I still got some white space between the background image and the menu beneath.

Can you help me get around it please?
Website is here http://cometer.altervista.org/
Thanks a lot!

After some tries, I found a different solution. I basically changed the background and made the site title and description invisible. This way the header didn’t change size and I didn’t have to touch the margin values and I preserved the social icons bar. At the same time keeping the text of title and description should be good for SEO purposes.

#branding {
  	background-image: url("/wp-content/uploads/2015/11/cropped-header-fiascone.jpg");
    background-repeat: no-repeat;
} 

#site-title a, #site-description {
  	opacity:0;
}

I don’t know if this approach is good or not, as I’m no expert and I don’t know much about coding.
I’d appreciate your opinion on this solution.

Also now I realize this header is not responsive at all of course, because it’s one very wide banner on top. Any suggestion on this regards?

Hi @capabomba,

I hope you are well today and thank you for your question.

You can try using the following CSS code instead which will make your header image responsive.

#site-title a, #site-description {
    visibility: hidden;
}
#branding {
    background-image: url("/wp-content/uploads/2015/11/header-fiascone.png");
    background-repeat: no-repeat;
    background-size: 100%;
} 

Best Regards,
Movin

Dear Movin,
thanks for your reply. I already tried with background-size 100% but I wasn’t very satisfied because with smaller screen the image get resized just fine but the header leaves a white space.

I’m thinking if I can maybe find a different solution, like making a much smaller header image (with just the logo, aligned to the left) + background color, site description made with custom font and another small image with the too small logos on the right side of the header (but this is seems to be the most complicated thing to do). This is just me thinking at solutions without knowing much about coding ^^

Hi @capabomba,

Yes you are right. It seems you can achieve this using the stated solution.

Unfortunately developing custom code for custom functionality is beyond the scope of support that we provide here.

If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. We recommend the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5

Best Regards,
Movin

Yeah, of course.
Thanks a lot for your support btw and for this fantastic free theme!