Sat, 2011-06-11 14:34
Hi guys,
I`ve just done my first website with HTML & CSS and was really happy that I`ve managed it so quickly (it`s simple and primitive but I do like it). Not until I opened it on another computer and I realized that it`s not finished at all....
So, I have a specific concern here, which I hope you can help me out with.
It`s about the composition of the background when opened in different resolutions
What I`ve done for the background is to safe 3 separate images:
1 image float:left
1 image float:right
1 image white gradient on top of both creating space for the conent and a smooth transitions between the two images.
some code snippets follow:
HTML:
<body> <div id="background"> <span id="bg"><img src="../images/content_bg.png" /></span> <span id="left"><img src="../images/bar_right.png" /></span> <span id="right"><img src="../images/bar_left.jpg" /></span> </div>
CSS:
#background { position:fixed; width:100%; z-index:-1; overflow:hidden; } #left{ float:left; z-index:50; } #right { float:right; z-index:60; } #bg{ position:fixed; left:-200px; }
I`ve designed the whole thing on my 16" laptop and it looks ok, but when opened on a bigger screen, it all breaks.
So, how can I make it happen that no matter in what resolution the page is loded, the images in the background would arrange properly ?
thank you in advance guys!!!
