Header with background image
Permalink Browser Info Environment
Hi,
I'm currently working on a special project for a Graphic Designer at http://grafomantestsite.be/index.php/look...
This page has 2 slides. When i scroll down the background of the header (= part of the background image of slide 1) has to stay. Any idea how i do this easily?
Thanks!
I'm currently working on a special project for a Graphic Designer at http://grafomantestsite.be/index.php/look...
This page has 2 slides. When i scroll down the background of the header (= part of the background image of slide 1) has to stay. Any idea how i do this easily?
Thanks!
| Type: | Pre-Sale |
|---|---|
| Status: | In Progress |
Hmm, that doesn't solve it. I want the background image (from the slider) from slide 1 to scroll down with the rest of the header so i get this on slide 2 (see screenshot).
Is that possible?
Is that possible?
Oh, I see!
So with the code I posted before, you actually get the background image to stay in place. The only problem is that the second slide has a background color and it covers the image when you scroll down.
So the first thing you should do is to remove the background color from the second slide, so you can see the background image.
Next you want to add a white background color only to part of the slide (the top 200px should have no color so you can see the image).
To achieve this, you can try adding the following code:
Hope I understood correctly now :)
Jordi
So with the code I posted before, you actually get the background image to stay in place. The only problem is that the second slide has a background color and it covers the image when you scroll down.
So the first thing you should do is to remove the background color from the second slide, so you can see the background image.
Next you want to add a white background color only to part of the slide (the top 200px should have no color so you can see the image).
To achieve this, you can try adding the following code:
#slide2::before { content: ''; position: absolute; top: 200px; left: 0px; right: 0px; bottom: 0px; background-color: white; }
Hope I understood correctly now :)
Jordi
This worked for me, thanks.
I added some extra pictures to his portfolio. And it shows some extra issues:
Can i set the header fixed to the top of slide 2? So when i scroll down to slide 2, it should stay at the top of slide 2, instead of scrolling above the pictures.
It's a bit hard to explain .. So i added some screenshots.
So like screenshot 1 and not like screenshot 2.
I added some extra pictures to his portfolio. And it shows some extra issues:
Can i set the header fixed to the top of slide 2? So when i scroll down to slide 2, it should stay at the top of slide 2, instead of scrolling above the pictures.
It's a bit hard to explain .. So i added some screenshots.
So like screenshot 1 and not like screenshot 2.
Hi!
Thanks for the screenshots :)
You can use the affix plugin available in Bootstrap to achieve this.
Basically you need to add the following javascript:
And also the following CSS:
Let me know if this works,
Jordi
Thanks for the screenshots :)
You can use the affix plugin available in Bootstrap to achieve this.
Basically you need to add the following javascript:
$(document).ready(function(){ $('.site-header').affix({ offset: { top: 0, bottom: function () { return ($('.lss-slide:nth-child(2)').outerHeight(true) - 200) } } }); });
And also the following CSS:
.navbar-fixed-top.affix-bottom { position: absolute !important; }
Let me know if this works,
Jordi
Works thanks!
I see you're using the background slider. Maybe you could try adding the following CSS rule:
Regards,
Jordi