Faded Jumbotron Image

Illdy
1

Hello, is there a way to make the jumbotron image with a faded black transparency? Just so the white text will pop more.

Thanks!
Samantha

2

Hello Samantha,

You could use this CSS solution, it should do the trick.

#header .top-header,
#header .bottom-header{
background: rgba(0,0,0,0.4)!important;
}

Regards

3

Thanks for getting back to me! I put this into the code but it doesn’t have any affect. Is it the right code?

Thanks for your help!
Samantha

4

Hello Samantha,

Can you please provide me a live preview of the website so I can locate why the above is not working?

Thank you

5

Yes definitely! Here you go.

http://yoline-davidson.samanthaongphoto.com/

Thanks so much!
Samantha

6

Hello,

Please change the current code with the one I quoted:

#header .top-header,
#header .bottom-header{
background: rgba(0,0,0,0.4)!important;
}

Should fix the issue

Regards

7

Thank you so much! I don’t know how the background part went missing but it works great now. The only thing is that I noticed on the iPhone that now the whole thing looks faded including the text.

Also do you know why it doesn’t go full width on the iphone?

8

Hello @samantha,

It seems to me that the buttons and text looks the same with and without the opacity layer, it just reflects the buttons transparency.

Also, which elements are not going full width on phone?
Please provide a screenshots of those, as well.

Regards

9

Hello, sorry I thought I had responded. It’s really odd because the jumbotron image doesn’t load isn’t loading on the iPad. DO you know why? It loads on the iPhone… See screenshot.

It looks like the Jumbotron width isn’t going full width on the iphone in portrait mode but looks fine landscape. The page width isn’t going full width as well. See screenshot. Do you know why?

You can view it at http://liz-jin.samanthaongphoto.com/

10

Hello @samantha,

You get this behaviour because the image is trying to go for the full height.
If you want full width on portrait mode you will have duplicates of the pictures to cover that area (see attachment)

For the white right bar, it seems like some of the text is too long and it’s falling outside the viewport:
WWW.SAMANTHAONGPHOTO.COM

You might want to remove the www and see how it goes.

Regards