Background Image Look Half

[renrasedoya]

I see at page https://thrivethemes.com/contentbuilder/ has green background (image background) look half at the back of video, and responsive in mobile. how css create it? Please help me!

[Paulie_D]

So, what have you tried so far?

Anything?

Try inspecting the site with Developer Tools (hit F12) in your browser so see what’s going on.

[renrasedoya]

Hi Paulie_D

I have design like that for desktop version. But, it become bad in mobile version. I using bootstrap 3.

[Paulie_D]

Then you need to provide a minimal demo, ideally in Codepen.io showing what problem you are having.

Not the whole page/site….just enough code to show the issue.

Unfortunately, “become bad” isn’t very specific.

[renrasedoya]

https://codepen.io/renrasedoya/pen/NRAPNL

[hongcheung]

I think you just need to take out “min-height: 150px” from your .bg, give some padding-bottom (at least half height of you image) should avoid the text run behind the image. sample below

.bg {background-image: url(‘https://thrivethemes.com/wp-content/uploads/2015/10/bkg-thrive-content-builder-green.png’); padding: 100px 20px; text-align: center}

[Author]

Posts