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!

Type: Pre-Sale
Status: In Progress
View Replies:
jordif replied on at Permalink Reply
jordif
Hi!

I see you're using the background slider. Maybe you could try adding the following CSS rule:

.ccm-bg-slider-container {
   position: fixed !important;
}


Regards,

Jordi
grafoman replied on at Permalink Reply 1 Attachment
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?
jordif replied on at Permalink Reply
jordif
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:

#slide2::before {
  content: '';
  position: absolute;
  top: 200px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: white;
}



Hope I understood correctly now :)

Jordi
grafoman replied on at Permalink Reply 2 Attachments
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.
jordif replied on at Permalink Reply
jordif
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:

$(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
grafoman replied on at Permalink Reply
Works thanks!

concrete5 Environment Information

Unable to load

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.