[alukaszewicz]

Is it possible to have my header image be transparent? I have crated an image in photo shop with the back ground removed, but when I add it as my header it seems to fill in the back ground white. I have tried it as a .PNG file type. I have been looking through the style sheet and I don’t see where the back ground is being added. Is the theme auto adding a back ground or am I doing something wrong with my picture? If it is in the code can you show me what to part to change?

Great theme, it is better than any of the purchased ones I have used in the past.

 

Thanks for any help!

My site: http://www.gettingstamped.com

[ronmerk]

Hi alukaszewicz

This is almost always the image file itself. Creating transparent images that are “really” transparent can be complex.

I suggest you check out this tutorial on Photoshop to make sure you are creating a transparent image correctly.

http://www.mediacollege.com/adobe/photoshop/transparent/background.html

Good luck 🙂

Ron

[alukaszewicz]

Thanks for the reply, my original picture when inserted in to MS office products it comes in transparent. I re did the picture following the instructions on the link above and again it appears transparent in MS office, but neither are clear when using them as a header in Catch box.

As far as I can tell the back ground is being added by the theme somewhere.

When evaluating the header with fire bug it shows the header as ‘IMG’ so I am wondering if somewhere in the style sheet for attachments and images the them is filling in my back ground.

If anyone knows please let me know, I will be working on it in the mean time.

Thanks!

[ronmerk]

Lets consider this from a different perspective. You’re looking for a “Transparent” background – why? Every website in the world has a “background”

It’s much easier to take your existing image and overlay it on top of a colour of the back ground you want behind your transparent image.

I checked out your link to your website and saw that you’re using a green palette. Probably you’re trying to make the “white” parts of the header transparent. If this is a correct assumption, why not “paint” your back ground the colour you want and then overlay your header layer on top of it. Merge all the layers in Photoshop and save as a jpg. Then you’ll have exactly the colours you want in all parts of your header image.

Ron

[Sakin]

@alukaszewicz: You are using the jpg image (http://www.gettingstamped.com/wp-content/uploads/2012/12/header_sketch3-copy.jpg) which is not transparent image. To create transparent image from the photoshop it needs to be .png image.

[ronmerk]

As usual, Sakin is correct. Part of the tutorial in my answer above clearly states:

“Now that you have a transparent background you can save the file in a variety of formats, including GIF, TIFF, PNG.

Notes:

JPG format does not support transparency.”

I recommend PNG file format for transparent images.

Ron

[alukaszewicz]

Sakin thanks for taking a look, yes the image I had up there when you looked was a jpeg because the .png file I made wasn’t working.

Right now I have up the .png I will leave it up until you can look at it.

The Jpeg I had up there was an old file that looked better than the my .png file and I wanted to keep my site looking ok while working on this problem.

The goal is to get a layered look with the .png file that is currently on the site as the header and then have a picture behind it in the back as the theme Background.

 

Ron thanks for all of your posts but I don’t think you saw what I was trying to do, so above I have tired to explain it more. Also I understand that jpegs are not going to be transparent, so as stated in the first post I was using a .png file type, but when it failed I went back to the jpeg I had on previously to keep the site looking the way it is for the mean time.

You can now copy my header image and paste it into another program and it will be transparent, but it still shows as a white back ground on the site.

 

Thanks for any help getting this one figured out. Again this is not really the way I would like my site to look so if you could take a look soon it would be great, I will try and make a .png file that looks like the jpeg I had up tonight.

-Adam

[ronmerk]

Hi Adam:

Took a look and yes, your image is now transparent, but! there has to be some sort of background, so be default most browsers will display “white”

Many themes include a default background image which you can overlay a transparent image on top of or you can change the back ground image to something of your choice (with a little tinkering of files etc). Catch Box doesn’t use a back ground image, However “Simple Catch” does.

In the end, given what you’re trying to achieve, I still think it’s easier to create your back ground in Photoshop and over lay your transparent image on top of it. You can use solid colours or overlay your transparent image over top of some other image. That way you should be able to create exactly what you want for your header.

Are you trying to create a header with the same green back ground as the side bar??

Ron

PS. Did you rent the cat out yet?

[alukaszewicz]

Sakin can you tell me if it is even possible to have a transparent header with a picture as a background before I spend anymore time on this?

Thanks

[ronmerk]

Hi Adam:

Hopefully Sakin will jump in.

Check out my site at: http://www.blazeonline.com/wls/

The logo on the left side of the header starts off as a transparent image (I created it in Photoshop specifically for this type of situation.) You can see that I dropped the transparent logo into the blended photo that takes up most of the header. I could have used the photo right across the header and had the logo over top of it, but I chose to blend it to white so the logo shows up better.

The point is, this is ALL done in Photoshop and then the final header image created is uploaded into the theme.

Hope that helps

Ron

[Sakin]

@alukaszewicz: There is background color white (#fff) define in header id branding that is why it is taking background white. Now you change that background color to match with the main background.

Go to “Appearance -> Theme Options -> Custom CSS” box in your WordPress dashboard and add the following css:

#branding {
color: #c9e17d;
}


@ronmerk: nice site and thanks a lot for your support.

[alukaszewicz]

Sakin – adding the code does not change the color behind the header image.

#branding {
color: #c9e17d;
}

 

*Also I do not want just a color behind the image, I am planning on putting a picture as the theme background, not just a single color.

 

I have also trying changing the code to read

#branding {
color: none;
}

That doesn’t make it transparent either, the theme seems to be adding the white color somewhere else.

I have also left that line defining the color in the #Branding completely out and that didn’t work either.

 

[ronmerk]

Hi Adam:

I took your transparent image and over layer it onto one of your other images to give you an example of how you can make a header with a transparent image on top of a photo.

I uploaded it to my server so you can take a look. You can see it here:

http://www.blazeonline.com/wls/wp-content/uploads/2012/12/adam1.jpg

One you do this with your images in photoshop, it’s then easy to brand your site with the result through the Theme Options > header or Theme options > background.

Ron

[Sakin]

@alukaszewicz: Sorry I gave you the css to change the text color. So , remove the old css and add this one.

Go to “Appearance -> Theme Options -> Custom CSS” box in your WordPress dashboard and add the following css to change the background color:

#branding {
background-color: #c9e17d;
}


But if you want to change the background color to background image then check this:
http://www.w3schools.com/cssref/pr_background-image.asp

[alukaszewicz]

Ron thanks for all of your interest on this topic but this is just NOT the way I want to do it. I am aware of how to do all of this in photo shop, I am trying to get a non traditional header/theme background look.

All I want to know if a transparent header image is possible in catch box.

If it’s not I am not interested in any other work arounds, I will go another direction.

[alukaszewicz]

@Sakinshrestha – that new code does change the header background color, I really want no color at all because I want my Theme > Background to show through my clear header.

Is this possible?

Right now I have a picture as the background (its not my final image), I would like my black stamps (header) to show through. Can we do this through custom css?

Thanks for all the posts

[Sakin]

@alukaszewicz: transparent background always takes the background of the parent. So, I don’t get is no color at all. It will take one or the other color is made transparent.

So, add in the final image and then call for css. We will help you. Also if possible send the image of the design that you want to change in the site. So, that we can know what exactly you want to do with your transparent image.

[Sakin]

@alukaszewicz:You can make the header and page background transparent. Delete the previous css and add the following

#page, #branding {
background: none transparent;
}


[alukaszewicz]

That worked, that is exactly what I was looking to do.

Again thank you for responding to many posts.

Excellent theme, and great support. Keep up the great work.

Adam

[riobum]

I realize this conversation was posted a year ago but I wanted to thank all involved because after searching through tutorials and how-to blogs and posts, I finally found this support forum. I had the same issue: a white background would automatically show underneath my logo once I uploaded my file onto my website.
All posts are very descriptive and I was able to make my background banner transparent. I didn’t need to enter codes, just save and upload my pic as png.

So THANK YOU: alukaszewics, ronmerk, and Sakin!

Lynna

[Author]

Posts