How do I make headers and footers transparent?


Hi, I an new to Ionic. So, I set up a background image for my app by adding the following css:

background: url(’…/img/NorthEnd.jpg’) no-repeat center;
background-size:100% 100%;

This works fine.

Now, I want this to be the background for for almost all ionic components. For instance, I want to make the header and footers transparent ( 50% opacity) such that you can somewhat still see the background image set above. So far, I have tried adding transparent png pixel size image to .bar and by adding:

background: url(’…/img/translucent_black_1X1.png’);

Doesn’t seem to work, I keep getting the white background, I even tried setting the .bar and .bar-stable background to none using background:none; - that doesn’t work either.

Am I missing something basic here? All I want to do is have somewhat transparent header and footers laid on top of a background image that spans all of header, content and footer.

Here is an example of what I am trying to get at:

As you can see, the header and footers are transparent enough that you can see the grey circles in the background.

Thanks in advance!

Side Menu App Dynamic Header

This is because ion-content is adjusting it’s top position to account for the header and footer. To override this, look at my example here.

How can I activate the transcluent statusbar on android? (NOT iPhone!)

Yup! That works. Thanks a lot!


Hi @mhartington, I am trying to transport the transparent header settings into the google maps example but with no success. Ideally I would like to have the map appearing behind the header. Do you think it is possible?



Yup, it’s possible. Remember, the content directive is absolutely positioned, so you’ll need to override those css values.


I got it, thanks a lot :slight_smile:



Is there any way to do the same with ion-scroll?

I play so far with: THIS DEMO but because of -webkit-transform can’t make it work.

Glad if someone can help,



Why cant I see any images that the users have posted. It’s hard to learn from their questions without images. Have the images been moved?