I just recently finished up coding a nice “About Me” page on my South Ataria Island website. I want to share with you my thinking behind the background for that page, it isn’t rocket science but if you’re new to CSS like me hopefully you’ll find this helpful.
I wanted the background to have columns with the same image, repeated 5 times each with a different color (like a rainbow effect). This allowed me to still have a ‘cover’ background effect, except with an image with ashorter width and thus a smaller file size. You can’t set the body’s background to display multiple images (at least I don’t think you can) so I had to setup the background with a number of divs, like so:
CSS:
.background {width: 20%; float: left; }
HTML
<div class=”background”></div>
<div class=”background”></div>
<div class=”background”></div>
<div class=”background”></div>
<div class=”background”></div>
Very simple code to start with. Next up is the addition of the image. To do so I added the image as a background to the DIV like so:
CSS:
div {width: 20%; float: left; background: url(“images/minmay-shaded.jpg”); height: 1080px;}
I had to add a height to the div (which is the height of the image) for the div to display and thus the background image to display. Remember, the height of the div depends on the size of the elements within, and these divs will not have any elements inside so therefore I had to declare a specific size in the CSS.
I used another (child) div to add the various colors to each background image.
CSS:
.cover-1 {background:linear-gradient(to bottom, rgba(255,241,71,.5), rgba(255,19,3,.9));}
.cover-2 {background:linear-gradient(to bottom, rgba(205,255,71,.5), rgba(0,205,0,.9));}
.cover-3 {background:linear-gradient(to bottom, rgba(142,250,255,.5), rgba(25,0,126,.9));}
.cover-4 {background:linear-gradient(to bottom, rgba(215,166,255,.5), rgba(71,0,129,.9));}
.cover-5 {background:linear-gradient(to bottom, rgba(255,175,219,.5), rgba(192,14,71,.9));}
HTML:
<div class=”background”>
<div id=”cover-1″></div>
</div>
<div class=”background”>
<div id=”cover-2″></div>
</div>
<div class=”background”>
<div id=”cover-3″></div>
</div>
<div class=”background”>
<div id=”cover-4″></div>
</div>
<div class=”background”>
<div class=”cover-5″></div>
</div>
As you see, each cover div has a width of 100% and a height of 1080px. Therefore when nested inside the ‘parent div’ it will overlap, or cover, the entire area or in other words cover the entire background image. For the colors I used linear gradient to give it the color fade effect and transparency so that you could still see the background image. Let me explain the linear gradient a little more since this is the first time I’ve mentioned it in this blog.
Example: (to bottom, rgba(255,241,71,.5), rgba(255,19,3,.9))
- To bottom: this is the direction of the gradient. In this case it is going from top to ‘bottom.’ For different directions I could have input ‘to left’, ‘to right’, etc.
- Normally I have been using either the color name (red, blue, yellow) or the hex value (#fff, #333, etc.) for color. The third option is ‘rgb’ which is a combination of 3 numerical values from 0 to 255 for red, green and blue.
- The last digit (.5 and .9) is the transparency value. The lower the number the greater the transparency of the color. You can see in the example I’ve set more transparency at the top and less at the bottom.
- There is a lot more to explain here and maybe it would be best for a future post.
In conclusion I hope you can see how really simple creating this background effect was. It is just basically a group of floating divs with a background and then another div on top with the color. Note, when you construct a background like this you’ll have to use ‘position: absolute’ for the content or else it will display under the divs.