How to choose a good Background for your Blog #4

{Read in Italian...}
come scegliere lo sfondo del blog 4
Hello! This is our last lesson about backgrounds.
So, we've made our choices: now we have to apply our background to our blog.
Again, I'm going to talk about Blogger interface, but of course the codes are universal and will work on any content management system, like Wordpress.
Blogger template designer lets us do almost everyting we need; however, it may happen to be unable to use this editor. Reasons can be multiple: maybe our template doesn't fully support it, or maybe we've been adding some code that has overwritten those selectors that normally allow the template designer to work.
What should we do then? Stick with our current background forever? No way! Editing the code related to our background is easy. Just remember:
keep calm and backup your template
Go to “Edit HTML”, press CTRL+F then type in the search box body. Scroll down until you find a CSS code similar to this:
body {
font: normal normal 15px Arimo;
color: #333333;
background: #ffffff none no-repeat scroll center center;
}
Your code might be slightly different, but for sure you will find the selector body and its attribute background. That's all we need.
Let's try to understand what these values mean.
  • #ffffff: this is our background color. This value (called hex-code) is made of a hashtag followed by 3-6 numbers and/or letters. In this example, we have a white background.
  • none: there are no images. If I had a background image, there would have been an URL in this place
  • no-repeat: if I had an image, with this value I'd prevent it from repeating. If I wanted to use a pattern, one that needs to be repeated to make sense, I would have typed repeat.
  • scroll: if I had a pattern, with this value my background would scroll down along with my content. If I replace this value with fixed, this would not occur: the pattern would still cover the whole window, but it wouldn't scroll down along with the content. It can be a nice effect, adding dimension to our blog.
  • center center: defines the position of a background image, both orizontally and vertically. With our example, the image would be centered (and then repeat itself if we specify a “repeat” value). Other values can be top, bottom, left and right.

Now, if we want just a solid color, look for its hex-code. You can check it from here: once you got it, copy and paste it into your CSS.
If we want an image or a pattern, first of all we need to upload it somewhere, to get a direct link, as we've already said in the previous post. Then, replace none with url(“”) and paste the link in between the quotation marks. Or, if we already have a background image but we want to change it, just change the link.
We're done!
Here's an example of what the CSS of a patterned background might look like:
background: #ffffff url(“http://yoursite.com/image.jpg”) repeat fixed top center;
That's all. For any question, feel free to leave me a comment!

Previous lessons:
1. General rules.
2. Solid colors and pattern dos and don'ts.
3. How to use a full-sized image as background.

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...