Image on top of background


#1

please reference site: http://pcnetguard.com/test6/

My main section (the first) where you see the background and the company logo are all part of the same picture. It looks fine on a PC/Tablet but on a phone the logo (Nu Dimension Design and Drafting) get cut off at the sides. I tried separating the background image from the company name (I put the company name img in a row) but could get it to work.

How should I properly separate the background house image from the company logo so that it scales properly?

Any help would be appreciated.


#2

Just use the image as an image and overlay the text as text. The text will then scale at it’s own pace as the image scales beneath it.

Add the image < img src="…" class=“img-fluid” alt=“Responsive image”>

Then overlay text, from memory something like this

< div class=“caption d-none d-md-block”>
< h5>…< /h5>
< p>…< /p>
< /div>

It’s all standard BS4 stuff so easy to find online.


#3

Thanks Mandarin. I ended up up doing it with an image. So the main section has the house in the background and the company logo/name is also an image inside a row:

< div class=“row”>
< div class=“col-md-12 text-center”>
< img class=“img-fluid d-block” src=“img/logo-title.png” >
< /div>