| Avin ~ παρυηzεΙ ~ Slay | ||||
|---|---|---|---|---|
|
My Blogs:
| |||
This is the next blog in the CSS installment. This blog covers CSS for the background of elements commonly known as <tags>
Background CSS[]
So, here we have the following possible statements:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background-Color[]
- This is an example of CSS in the HTML tag value.
"background-color:name of color or a hex decimal value;" to make this work, I have set this div up so that it has:
<tag/element's name style="background-color:#3366cc;">The text inside</tag/element's name>
- 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.
DIV.bluebacking {background-color:#3366cc; }
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: <div class="bluebacking">Hai text in here!</div>
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:Avin-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://vignette2.wikia.nocookie.net/central/images/8/88/Avin-blog-photo.jpg What we will do to use this link, is
.bluebacking
{background-image:url("http://vignette4.wikia.nocookie.net/halcyonictests/images/7/78/Rapunzel.jpg/revision/latest?cb=20141223181220");}
This will cause the picture to show up.
Background Repeat[]
So, background-repeat, this seems easy enough, right? Well sometimes it is, and sometimes it isn’t, anyways here goes.
.bluebacking {
background-image:url("http://vignette4.wikia.nocookie.net/halcyonictests/images/7/78/Rapunzel.jpg/revision/latest?cb=20141223181220");
background-repeat:repeat;
}
This would repeat the picture up and down, and left and right. almost like tiles in a shower or on a floor.
Background Repeat X[]
.bluebacking {
background-image:url("http://vignette4.wikia.nocookie.net/halcyonictests/images/7/78/Rapunzel.jpg/revision/latest?cb=20141223181220");
background-repeat:repeat-x;
}
This would repeat the image from the left, to the right but it would stay on one row, almost like if we stayed on one line while writing on a piece of paper.
Background Repeat Y[]
.bluebacking {
background-image:url("http://vignette4.wikia.nocookie.net/halcyonictests/images/7/78/Rapunzel.jpg/revision/latest?cb=20141223181220");
background-repeat:repeat-y;
}
This would cause the image to repeat from the top to the bottom, and would be almost like if we wrote one letter or word on every line on a piece of paper.
Background No Repeat[]
.bluebacking {
background-image:url("http://vignette4.wikia.nocookie.net/halcyonictests/images/7/78/Rapunzel.jpg/revision/latest?cb=20141223181220");
background-repeat:no-repeat;
}
This, no-repeat, would make it so that the file doesn't repeat on the x axis or the y axis, aka to the left/right/up/down
Background Initial[]
.bluebacking {
background-image:url("http://vignette4.wikia.nocookie.net/halcyonictests/images/7/78/Rapunzel.jpg/revision/latest?cb=20141223181220");
background-repeat:initial;
}
Background initial gives us whatever the initial, or natural state of the element is for the styling we're applying.
Background Attachment[]
So, background attachment lets us do all kinds of wonderful things to the background, and with things that we affix to the page, such as pictures of all kinds.
Scroll[]
.bluebacking {
background-image:url("http://vignette4.wikia.nocookie.net/halcyonictests/images/7/78/Rapunzel.jpg/revision/latest?cb=20141223181220");
background-repeat: no-repeat;
background-attachment: scroll;
/* Added portion to show you that it works */
overflow-y: hidden;
width: 600px;
height: 300px;
overflow: scroll;
/* End of added portion to show you that it works */
}
This portion of the css gives us a picture that is affixed to one point and scrolls with the text. So as the text scrolls this portion stays with us on the page as a background to the text.
Fixed[]
.bluebacking {
background-image:url("http://vignette4.wikia.nocookie.net/halcyonictests/images/7/78/Rapunzel.jpg/revision/latest?cb=20141223181220");
background-repeat: no-repeat;
background-attachment: fixed;
/* Added portion to show you that it works */
overflow-y: hidden;
width: 600px;
height: 300px;
overflow: scroll;
/* End of added portion to show you that it works */
}
Fixed does just that, it fixes the image to a certain point on the page, in this case it's a little odd where it shows up on the demo wiki link, but if you scroll some on the main page and the container, you should be able to get the image of Rapunzel to appear.
Local[]
.bluebacking {
background-image:url("http://vignette4.wikia.nocookie.net/halcyonictests/images/7/78/Rapunzel.jpg/revision/latest?cb=20141223181220");
background-repeat: no-repeat;
background-attachment: local;
/* Added portion to show you that it works */
overflow-y: hidden;
width: 600px;
height: 300px;
overflow: scroll;
/* End of added portion to show you that it works */
}
So, here's what local does, it makes it so that the picture stays in one local place, aka, at the top wherever your container for it is, or wherever else you placed it in the container.
Initial/Inherit[]
Initial does what the element's natural state is, and inherit inherits from the class or element that is "above" it.
Background Position[]
The best thing that I can think of too do for this portion, is to link you guys to a help website so that I don't spend hours typing these out, (hey we all have to do other stuff right? c;).