Forums

Paralax effect on section

Permalink
Hi,

As anyone an idea of how to do this :
I have a section with content inside and also a Paralax Background image.
I call the image like this in CSS for the Section :
#banner {
      padding: 16em 0 13em 0;
      background-attachment: fixed;
      background-image: url("images/overlay.png"), url("../images/banner.jpg");
      background-position: center top;
      background-size: cover;
      line-height: 1.75;
      text-align: center;
   }


I need my user to be able to change the Background-image as soon as they want.
And to let you know there is 2-3 different Banners with Content in one page.

Any idea would be great.

Thanks in advance
chrismodlao
 
ob7dev replied on at Permalink Reply
ob7dev
You could make a new image attribute and attach it to the page type.

If you made the attribute handle my_image, you could effectively pull it into a custom page type. Something like:
$myImage = $c->getAttribute("my_image");

If the file exists, you could then work with it:
$ih = Core::make('helper/image');
if ($myImage) {
  $ih->getThumbnail($myImage, width, height, crop);
}

Your css code could then be something like"
#banner {
background-image: url('<?=$myImage->src?>');
}


The image file itself would be selected from the page types composer view.
chrismodlao replied on at Permalink Reply
chrismodlao
Thanks for reply i will try to do it as soon as i can.

What about this ??
http://www.concrete5.org/marketplace/addons/parallax-area1...
ob7dev replied on at Permalink Reply
ob7dev
I personally haven't tried the addon. I've always used stellar.js as of now, although I found another nice one recently called SkrollR but haven't tried it yet:http://prinzhorn.github.io/skrollr/...