karenak Crown



Here's the Categorian Beginner's First Aid Kit - Part Three /a



Background Image for a single Blog Post


In Part Three of this tutorial we learned how to set a background image for ALL our reviews / blog posts.

However, you might want to set a different background color or image for one single blog post. In that case you do not bother with the style sheet (although it can be done) but you simply enter the HTML code directly into your blog post.


The syntax

The code for the image itself is the same that we used in the Style Sheet for the page background (see Part Two of the tutorial):


background-image: url( http:// ... path to your image ... );



But this is CSS and in order to be able to use it in a blog post - which is done in HTML - we have to wrap it into the "style" attribute:


style="background-image: url( http:// ... path to your image ... );"



Now, the "style" attribute cannot stand alone. As an attribute, it merely provides additional information about an HTML tag - for example the DIV tag. So we use the DIV tag as a container for our background image:


<div style="background-image: url( http:// ... path to your image ... );"> ... your blog post text.... </div>

Please note that instead of the DIV tag you could also do this with the P tag (P = Paragraph) or the UL tag (UL = Unordered List = bulleted list) or several others. All of them can be the container of the "style" attribute and therefore of the background image.

Also be aware that you can add "background-position", "background-repeat" and "background-size" etc. according to what is wanted/needed. (See examples below)




How to use it

If you post a picture with the IMG tag and add no other code or text, the review will be just as big as the height of the image. (The width is determined in the style sheet)

This is NOT the case with the background image !

You determine the size of the blog post by the number of lines you enter - either text or empty lines. ONLY THEN will your container be filled with the background image. So if not all of your background image is visible, hit "Enter" a few times until it is !

Remember to also define the right text color - as in the style sheet this is done with


color: colorname;




Example 1 - For small, seamless images


<div style="background-image: url( http:// ... path to your image ... ); color: color name;"> ... your blog post text.... </div>



Example 2 - For photos


<div style="background-image: url( http:// ... path to your image ... );background-size: cover; color: color name;"> ... your blog post text.... </div>



Example 3 - As a decoration on the left side


<div style="background-image: url( http:// ... path to your image ... );background-repeat: repeat-y; color: color name;"> ... your blog post text.... </div>



Example 4 - For a background color


<div style="background-color: darkblue; color: gold;"> ... your blog post text.... </div>



>>>> Part Four