Overlay Search On Background Image

[davvam]

Hi

I am trying and trying to get my HTML/CSS to match the example JPEGI have attached.

I tried to use a background image, but would prefer a CSS option.

I am also struggling to align the ‘Get A Quote’ graphic just above the overlay effect as per the JPEG example.

Please see this as an example as it might make things clearer and the JPEG is how I need it to look.

http://www.cre8tivesource.co.uk/search-test/search.htm

Would really appreciate some help/guidance with this and how I can achieve the JPEG example.

Many Thanks

[ralphm]

It’s important to structure something like this really carefully. Consider how this all will fit within the whole page. Assuming you want this full width, that’s fine, but because you want the search section associated with the slideshow, wrap them both in a shared container that is set to position: relative so that they can be positioned in relation to each other.

I would use just a background color on the search section so that you can set rgba transparency on it.

Those are some basic first steps.

[davvam]

Hi

Thanks for the response. Yes it will be full width, within a Bootstrap framework.

Finding it very difficult to apply the example jpeg design.

As you can see the ‘Get A Price’ icon overlaps the transparent strip, but not at the same height, if that makes sense?

[ralphm]

It’s actually quite easy to do, but as I mentioned, first things first. I made some suggestions about the initial structure. Did that make sense? Did you try it?

[PaulOB]

Here’s a basic example of what Ralph was suggesting.

You would of course need to integrate that into bootstrap but the basics are in the code above.