CSS Controlled Background

Would you like the blockquotes on your sites to look like this?

HOME OF THE ORIGINAL PC BUYING GUIDE – goldfries.com focuses on publishing articles, reviews and guides on Computer Hardware, Computer Games, Web Design and Blog Development, Digital Photography and various Computing Technology.

It’s all a matter of controlling the image used in background of elements found in web pages. By understanding the concept of controlling background, you’ll be able to apply this to practically every aspect of a website that involves background.

In this article, I’ll be highlighting 4 very simple CSS setting for background that could enhance the look of your site.

Understanding the Control and Applying It

Keep in mind that whatever that’s covered in this article are applicable on any part of a website. You just need to know how to implement it. 🙂

1. Color Setting

The most common of all background setting – the solid color. Just enter the hex code of your choice of background color. 🙂

background:#ACFA58;

Don’t know the hex code of the color you wanted? Here’s a nice site to find your color code. No, it doesn’t have to be in capital letters.

2. Image Setting

With this, you could load an image for your background.

background:url('images.gif');

Normally, the COLOR and IMAGE settings are used together. At least you still have a solid color to keep that portion semi-decorated in case the background image refuses to load or someone decides to block image loading,

Just be careful not to pick any background image that…
1. takes too long to load.
2. irritates your visitors.
3. both the above.

background:url('images.gif') #ACFA58;

3. Repeat Setting

Without defining any of the settings, browser will automatically set the background image to repeat itself horizontally and vertically.

With the beauty of CSS, you can set the background to repeat horizontally, vertically or not to repeat at all!

Keywords available are…

• repeat – Repeats itself on X and Y axis (pointless)
• repeat-x – Repeats on the X-axis, commonly used for backgrounds.
• repeat-y – Repeats on the Y-axis, left used but comes in handy.
• no-repeat – Always used in conjunction with background image that are set to a specific position.

Here’s how you could set the background image to repeat itself on the X-axis.

background:url('images.gif') repeat-x #ACFA58;

4. Positional Setting

By applying positional keywords such as “top left”, it will assign the image to the TOP LEFT side of the element involved.

Keywords available are…

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

background:url('images.gif') top right no-repeat #ACFA58;

Notice how I used NO-REPEAT with TOP RIGHT, the output would be as what you see in the Syntax View box. The image appears on the upper right side AND it’s not being repeated.

Conclusion

So there you have it, it’s amazing what you can do for your site just by knowing the REPEAT and POSITIONAL settings for background.

Another interesting site for reference : CSS Background