User:Slayingthehalcyon/saving

This is the next blog in the CSS installment. This blog covers CSS for the background of elements commonly known as

=Background CSS= So, here we have the following possible statements:
 * background-color
 * background-image
 * background-repeat
 * background-attachment
 * background-position

Background-Color
Okay so this utilizes the  to make this work, I have set this div up so that it has:
 * This is an example of CSS in the HTML tag value.

DIV.bluebacking {background-color:#3366cc; }
 * This is an example of the CSS in the MediaWiki CSS or External CSS
 * With classes I can specify what elements/tags I want the code to effect when I apply it.

With the DIV I told the CSS what tag/element to change. With the .bluebacking I told the CSS that it should only affect div tags that I give the class bluebacking to. Pulling up this class would look like this:

Background-Image
Okay so the next one is helpful, because it allows us to specify a very different kind of background for links. This one requires using the MediaWiki:Wikia.css or the MediaWiki:Common.css.

I can't show you how this one looks, as I can't edit the wikia.css or the common.css, but you should be able to edit that on your wiki. c:

.bluebacking {background-image:url("paper.gif");}

Here we've again used the .bluebacking and we'll use it throughout the rest of this blog. Background-image: tells the CSS that we are changing the background's displayed image. url("paper.gif"); is necessary to make this work. URL tells the CSS that we are selecting the image via URL. The ( and ) merely surround the text between the url and the ;. The two quotation marks surround the text inside of the parenthesis.

To get the link that we will have to use on wikia, we go to the image that we want to use. For an example we'll use one of the images I use in my blog header: http://community.wikia.com/wiki/File:Slay-blog-photo.jpg After we click this link, we would then click on the image, and we will get a link that looks like this: http://img4.wikia.nocookie.net/__cb20140315040127/central/images/0/0a/Slay-blog-photo.jpg What we will do to use this link, is

This will cause the picture to show up.