Foundation/Fundamental Grid overlay Header full width image
Permalink
I'm using Fundamental theme. I'd like to place a Foundation Grid over the top of my full width header image so I can overlay a page title and other information over the top of the full-width header image.
From what I can see, the full width header image is defined in header.php within concrete/packages/fundamental/elements/
However, I'm not sure:
1/ How to implement foundation grid for this area and;
2/ When I add a new foundation grid layout to my full-width image area, how to get this to overlay the image rather than appear beneath or above it.
Here's my test pagehttp://gotimetrekkers.com/holidays/destinations/europe/uk/stoneheng...
Any ideas very much appreciated!
From what I can see, the full width header image is defined in header.php within concrete/packages/fundamental/elements/
However, I'm not sure:
1/ How to implement foundation grid for this area and;
2/ When I add a new foundation grid layout to my full-width image area, how to get this to overlay the image rather than appear beneath or above it.
Here's my test pagehttp://gotimetrekkers.com/holidays/destinations/europe/uk/stoneheng...
Any ideas very much appreciated!
Fundamental is based on Bootstrap. Why do you want to use Foundation instead of Bootstrap?
I'm no expert here so maybe i've got it wrong. But within my fundamental themed website i can add foundation grids (within custom template) to the main area. I just thought that to be consistent, if i'm adding layouts i should try to add foundation grids rather than bootstrap. Does it really make any difference?
On my other point, how can i add layout and have it overlay an existing block in that area? Simply so i can add a page title to thd header image area.
Thanks
On my other point, how can i add layout and have it overlay an existing block in that area? Simply so i can add a page title to thd header image area.
Thanks
Your problem is not really a Concrete5 problem. It's more of an HTML/CSS problem.
First your image is inserted in the page as an Image tag so If you want to overlay text on top of it you need to go through a few steps.
1- Add a DIV with a specific ID or class name around your image so you and up with
2- Add your text inside the first div and wrap it inside a div with a specific ID or class name as well so you have
3- Add the following to your CSS
Feel free to modify top and left values to suit your need. You can also use right and bottom.
That should do the trick
First your image is inserted in the page as an Image tag so If you want to overlay text on top of it you need to go through a few steps.
1- Add a DIV with a specific ID or class name around your image so you and up with
<div class="banner-image-wrapper"> <img src="http://something.com/image.jpg" alt="Something"> </div>
2- Add your text inside the first div and wrap it inside a div with a specific ID or class name as well so you have
<div class="banner-image-wrapper"> <img src="http://something.com/image.jpg" alt="Something"> <div class="banner-overlay-text">Your text</div> </div>
3- Add the following to your CSS
.banner-image-wrapper { position: relative; } .banner-overlay-text { position: absolute; overflow: visible; top: 15px; left: 25px; }
Feel free to modify top and left values to suit your need. You can also use right and bottom.
That should do the trick
Many thanks for that.Had to play about with a touch, but works like a charm!
You're welcome
