0

I'm trying to create a single page website that scrolls vertically. My design is image based and it needs to be mobile responsive for my grade.

The issue I'm having is with the background images. I can get backstretch to work with just the body, however i need it to work in different divs and not just display one image over the entire height of the container.

I'm not that experienced with jquery. Which is definitely my main issue here :(

Any suggestions would be greatly appreciated. Here's what I have so far.

<div id="container">

        <div id="one">
            <script>
                $("#one").backstretch("img/banner1.jpg")
            </script>

        </div>

        <div id="two">



        </div>

        <div id="three">
            <script>
                $("#three").backstretch("img/banner2.jpg")
            </script>
        </div>

That applies the image to the divs, however it no longer scales the image at all, instead of centering on the y-axis it just hides a portion of the image.

Pupz89
  • 1
  • 2
  • whats your layout look like?? – Tasos Apr 12 '15 at 00:57
  • so far...
    – Pupz89 Apr 12 '15 at 01:09
  • I'm trying to mimic the layout for this website, if that helps you understand better. Sorry I'm new to this and we've barely covered javascript and responsive design in our class. http://mclellanjacobs.com/ – Pupz89 Apr 12 '15 at 01:15
  • You want multiple images within different div's, you can do that in pure css and change the images dynamically. -- http://jsfiddle.net/9cyeddbe/ -- if you want to contain the images so they don't stretch change 100% 100% to (contain) or you can use (cover) as the website does – Tasos Apr 12 '15 at 02:57
  • I'll add some images to the above question cus I'm finding it hard to explain what I need haha – Pupz89 Apr 12 '15 at 03:09
  • Not enough points to upload images... Handy... Well if you go to http://mclellanjacobs.com/ and play about with the size of your browser you'll see the what I want to achieve with the images they have. – Pupz89 Apr 12 '15 at 03:17
  • Do a demo on fiddle like i did --- not enough points?? what that, oh on SO , dont worry about that use http://postimage.org/ --- its free, just get the links – Tasos Apr 12 '15 at 03:33
  • http://postimg.org/image/gb1253hs3/ There's background I plan to use – Pupz89 Apr 12 '15 at 03:36
  • http://postimg.org/image/ezg7e7v93/ There's how i want it to scale down... I need the height to remain the same but for it trim the left and right side so it ends up like that as you decrease the window size – Pupz89 Apr 12 '15 at 03:37
  • Yeah so use my demo, get the proper link for the post image, i think its in the second box down, and change (background-size: 100% 100%;) to (background-size: cover;) – Tasos Apr 12 '15 at 03:41
  • Ah I see how it works now, gonna give it a bash. Thanks for your help. You hero :) – Pupz89 Apr 12 '15 at 03:46
  • To get more understanding in plain English about the background size property go here -- http://www.w3schools.com/cssref/css3_pr_background-size.asp – Tasos Apr 12 '15 at 03:48
  • So I've taken that code into Dreamweaver to experiment with, however I can't get the images to appear.... I have no idea why I'm studying this cus it's all gibberish to me :( – Pupz89 Apr 12 '15 at 03:58
  • So I have the CSS the the 3 divs, it works in the demo you have. What do I do with the javascript? – Pupz89 Apr 12 '15 at 04:16
  • if you just have 3 divs with just 3 images you don't actually need javascrip/jquery -- just use (background-image: url('the-image.jpg');) in the css - demo -- http://jsfiddle.net/8szdxmhf/ – Tasos Apr 12 '15 at 04:26
  • Yea got it eventually. Going to have to learn all this again from scratch over the summer after this is finished. I do really appreciate your help man. Been pulling my hair out over this haha. – Pupz89 Apr 12 '15 at 04:42
  • no problem, i went through the same thing, everyone does. – Tasos Apr 12 '15 at 04:58

0 Answers0