How to make header area completely transparent


#1

I’m a newbie, so lets just get that out there.

I’m working to customize a new blog and I have these funny not quite transparent areas right around my image in my header section. Can anyone help me to get ride of these areas and make it completely transparent behind my header and my posting area.

You can see it here.

teachingontheeastside.blogspot.com/

Thanks!


#2

I don’t understand what do you mean your header image’s background is white in the pic. Can you explain with more details?try to add a image illustrating your problem.


#3

If you look just outside my image, on both the left and the right, there is a faint white area that should be transparent.

It’s on both sides of my future navigation bar right under my header.


#4

Dear, that is on picture. You can remove it by using Paint or Adobe Photoshop with a single click.


#5

No, I don’t thinks so. The header image is a png file and when I drag it and drop onto a black background in Photoshop, it is not visible.

You can also see that there is a slight color change going all the way up and down the green stripe that covers the header area and the body area. I am guessing it has something to do with padding or margins, but I just can’t figure it out.

Thanks for trying to help though!


#6

I got it. :smile:

Search this code in your template:

.header-outer {
    background: transparent url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -400px;
    _background-image: none;
}

and now, remove it. And then save template. :smile:


#7

Thank you! That did it! :smiley:

I see that the very faint line is still all the way down the green stripe, any ideas? It’s not very noticeable, so I can probably live with it.

Bonnie


#8

Please explain with the help of image. :smile:


#9

Sure thing. Notice there is a very faint line distinction in the middle of the green stripe. This goes all the way up and down the page. The other side of the page has it too, but it is hidden in a white stripe I think.


#10

I think you have corrected it yourself because I can’t see the issue you are talking about.


#11

Dear BDavis,

For this you have to do some photo editing and if you know how to make an image transparent in photoshop then it is not difficult.

Make sure you have your header file as .PNg format after reducing the fill area as transparent with photoshop. After doing this, save your header image as .PNG format and upload in your blog.

I hope you understand what I mean to say. If you still don’t understand then you can contact me through my blog.


#12

Please can someone help me out i need to make sure i have more than one banner head image and also i need to get rid of the grey background and make that one there now and others transperent backgorund any css code? This is my blog Domian oyomare.com


#13

Very interesting discussion glad that I came across such informative post…