0

whitespace=bg image

https://i.stack.imgur.com/FbxQZ.png

CODE: html

<div class="container">
    <div id="content">
         <div id="item1"></div>
         <div id="item2"></div>
         <div id="item3"></div>
    </div>
</div>

css

body {background:url(image.jpg);}
.container {width:100%; height:50%; overflow-x:scroll;}
#item1, #item2, #item3 {height:100%; width:50%;}

I have searched but all answers say to use a transparent-to-white *gradient. I have a bg image (not in pic attached - sorry) that I want it to fade out to. I have seen this on other sites, I assume JS?

user3533484
  • 1
  • 1
    This is a very confusing way of asking a question. "whitespace=bg image" -> link... etc... is very Tarzan. I would suggest a bit more time on outlining what you are looking to do, and for you to take the time to make a jsFiddle – sheriffderek Apr 14 '14 at 20:27

1 Answers1

0

canvasimagegradient could help you. It allow you to draw linear or linear or radial transparent gradient effect.

Following code is an example of code to make a linear gradient :

ctx.drawImage(desertImage, 0, 0);

var linearGradient = ctx.createLinearGradient(0, 0, 0, googleImage.height);
linearGradient.addColorStop(0, "transparent");
linearGradient.addColorStop(1, "#000");

ctx.drawImageGradient(googleImage, 12, 65, linearGradient);

This would give you something like this :

enter image description here

Note that you will need to use canvas

SauriolJf
  • 412
  • 2
  • 10
  • thank you. would i place the element around #content? or on top of it? – user3533484 Apr 14 '14 at 20:21
  • I don't have experience with canvas but this post seems to indicate the proper way to do this : http://stackoverflow.com/questions/6011378/how-to-add-image-to-canvas – SauriolJf Apr 14 '14 at 20:32