Colourful background from sunnieweb. Saving images and CSS coding
When I was making web design for current version of sunnieweb website I wanted to use different colours and elements, make it more lively and fresh. But at the same time doing that means finding how to display all the elements and colours the way when they look nice and load fast at the same.
I usually create layouts with next technical requirements:
- correct preview in browsers IE 6, 7, 8, Firefox 3 and higher, Opera 9.0.2 and higher
- minimum screen resolution 1024×768
Solution:
Layout was created with width 1500px where content area is 1000px, background smoothly changing into one colour for higher screen resolution. In the article “Image optimization for web. Images for text, logos and other elements” I described that usually best solution you can get when saving images in different formats and use CSS to combine them. I did the same when was making background and header for current version of sunnieweb. Instead of saving all as one image (when you can get nice quality of one colour elements as flowers pattern, logo and cloud only with maximum quality settings and big size of a file) I saved all elements separately.
Main background is saved as JPEG, put in container where aligned in the center. The image is not used for <BODY> element because picture has not to move over browser’s window if it’s smaller than 1024px.
<style>
#allBg {
background:#E2A6DC url(images/sunnieweb-mainbg.jpg) top center no-repeat;
min-width:1000px;
height:100%;
}
</style>
<body>
<div id="allBg"></div>
</body>
Background with white flowers saved in GIF format merged with 1 outer pixel of main background and rest of the image is transparent. This imaged is used in <div id=”flowersBg”></div> and also aligned in the center.
<style>
#flowersBg {
height:100%;
background:url(images/flowers_bg.gif) 50% 161px no-repeat;
}
</style>
<body>
<div id="allBg">
<div id="flowersBg"></div>
</div>
</body>
All previous backgrounds have width bigger than 1000px and need to be put in elements with 100% width and aligned in the center. Than for smaller resolutions or width of browser’s window background will be cut on edges but still look ok.
Background with rainbow is also longer than 1000px and picture has to be aligned on the right. To do so I measured width of the rainbow’s part which stands out on right side from content part – 129px, added width of the white content part – 900px and the same size of rainbow for left – 129px. Saved it as GIF with transparent background and width 129+900+129=1158px.
Now we can put this image in container with 100% width <DIV id=”rainbowBg”></DIV> and align in the center.
Rainbow is on the right of the content part and header elements.
<style>
#rainbowBg {
height:100%;
background:url(images/rainbow.gif) 50% 0% no-repeat;
}
</style>
<body>
<div id="allBg">
<div id="flowersBg">
<div id="rainbowBg"></div>
</div>
</div>
</body>
Header has fixed width 1000px and its elements I divided on two – cloud and logo – parts. Header container is aligned in the center of a browser (width:1000px;margin:0 auto;text-align:center;), cloud – on the left of the header, logo part – on the right.
Cloud is saved as GIF with transparent background and 1 outer pixel of main background.
Right part I divided on background with face saved as JPEG.
And sunnieweb logo is in GIF format when I get the best quality of this element and smaller size.
Complete example of HTML, CSS and images is here and also in ZIP format