How do I make headers and footers transparent?

ionic-v1
1

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

.scroll-content{
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 .bar.bar-stable 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!

2

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.

3 Likes
3

Yup! That works. Thanks a lot!

4

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?

Thanks!

5

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

1 Like
6

I got it, thanks a lot :slight_smile:

7

Hello,

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,

Thanks,

8

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?