Multiple backgrounds with canvas drawing
by Hans Pinckaers
First the syntax to call the function. I use this code to draw the backgrounds behind the header in this site:
$mb(['info'], ['url(http://hanspinckaers.com/img/mainBackgroundTop2.png) no-repeat 8px top', 'url(http://hanspinckaers.com/img/achtergrondHoofdartikel.jpg) no-repeat 8px bottom']);
- You can see a simple example with rounded corners here
Points of improvements
- It’s buggy (report bugs please!)
- Maybe convert it into a class
- Speed (always a good one to improve)
- Destination element must have an absolute or relative position declared in his css
Project homepage: at Github. You can download the files from there.
You have to add these lines before you call the $mb funtion:
I modified googles excanvas so it is smaller but can only be used to draw images.
If you have any questions, please ask in the comments! And please always keep progressive enhancement in mind, so set a normal replacement background in the css.