How to get block overlay full width header image
Permalink
Hello,
I have a search form on my home page that is currently in my full-width header image area (it's within a Foundation grid area). My problem is that when I try to place the header image in the full width image area, it gets placed either above or below the form (i.e. nearer the top or bottom of the screen depending on where I place it). I need the image to be underneath (as in a layer beneath the search form), so the search form covers part of the image.
How can I do this?
Here's the web page.
http://gotimetrekkers.com/
Thanks
I have a search form on my home page that is currently in my full-width header image area (it's within a Foundation grid area). My problem is that when I try to place the header image in the full width image area, it gets placed either above or below the form (i.e. nearer the top or bottom of the screen depending on where I place it). I need the image to be underneath (as in a layer beneath the search form), so the search form covers part of the image.
How can I do this?
Here's the web page.
http://gotimetrekkers.com/
Thanks
Apologies, forgot to turn maintenance off. Shold be ok now. I think I may have solved it anyway.
If i create a copy of the image block and insert the contents of my search-form block in view.php i'm thinking that should work??
If i create a copy of the image block and insert the contents of my search-form block in view.php i'm thinking that should work??
That should work, but you won't be able to edit the search form through the CMS, you'll have to hard code it.
As jlines41 mentions , and then use CSS to create the background image like
background:url(img/bacjground.png) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background:url(img/bacjground.png) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Are you inserting the image into the editable area with an image block? You are going to have to insert your image as a background image. If you put your page in edit mode, click the editable area in your header, then select 'design', you can add the back ground image that way. Click on the background tab, and set your background image that way. Then you can add your form or search box using the appropriate block.
Anything beyond that will require modifying the source code. You will have to create a div for your background image, then nest your form div inside of it. something like this:
<div class="background-image">
<div class="form-area>
</div>
</div>
Of course you will have to use the class names you create and accompany that with your css styles.
Anything beyond that will require modifying the source code. You will have to create a div for your background image, then nest your form div inside of it. something like this:
<div class="background-image">
<div class="form-area>
</div>
</div>
Of course you will have to use the class names you create and accompany that with your css styles.
Your link seems to point to a holding page with a toolbar showing. I see no search form