Background of div should "overflow" and more

[robertnorgren]

Hi!


I'm working on a new website project and I've encountered a few - hopefully - minor issues. I'd appreciate any help I can get.


URL: http://www.robertnorgren.com/createfromsketch2/index.php


1) I would like the background of each wrapper/section (the cloud) to be fully visible but now it's cut off by the width/height of the div.
What would be the best option? Increase the widths of the wrapper or maybe create a new div with lower z-index? Any ideas?


2) The GIF animation (the birds) has this ugly white border, which was created in Photoshop -> Save for Web - Save as GIF.
Any alternatives? Some sort of PNG animation?


3) If you for example press nav button "Go to page II", I would like to have this container centered but this is not the case... Guess I have to play with margins a bit more or am I wrong?



Tearing my hair over here. Let me know if you have any ideas.


Cheers! ( :

 

[hkjeffchan]

1) I would like the background of each wrapper/section (the cloud) to be fully visible but now it's cut off by the width/height of the div.
What would be the best option? Increase the widths of the wrapper or maybe create a new div with lower z-index? Any ideas?

Create a container div and set its background. Set a bigger width, say 1920px and then center that with "margin: 0 auto"

2) The GIF animation (the birds) has this ugly white border, which was created in Photoshop -> Save for Web - Save as GIF.
Any alternatives? Some sort of PNG animation?

Forgot GIF, it is outdated. Use PNG, if your animation is simply moving up and down, simply use jquery to animate the position. You can do lots of animation using jquery right now.

You may check my site:
Interactive HTML5 Animation
Simple HTML5 Animation

3) If you for example press nav button "Go to page II", I would like to have this container centered but this is not the case... Guess I have to play with margins a bit more or am I wrong?

If you want to center an div with fix width, simply set its margin to "0 auto", it will be put at the center of its parent div