Forum:Adding CSS classes

Heading
How can I make a heading 2 with a background image of http://images2.wikia.nocookie.net/__cb20111209055428/isleoftune/images/4/4e/Don%27t_Stop_Believing.png using CSS to add to MediaWiki:Wikia.css in Isle of Tune Wiki? Though the file is very large, is it possible to crop it without uploading a new one? Also, I would like it to have those features:


 * Height: 30px


 * Width: 100%


 * Border Radius: 7px

 If anyone has an idea to what this can be like, then please contact me on my talk page   —  Sam Wang  20:43, December 27, 2011


 * Adding something like:

.WikiaArticle h2 {background: url("http://images2.wikia.nocookie.net/__cb20111209055428/isleoftune/images/4/4e/Don%27t_Stop_Believing.png")}
 * would do the job. Although personally I think it looks unreadable. Also, nice sig ;D — Sovq 12:58, December 27, 2011 (UTC)
 * Thanks! I've basically used your signature but changed the link  — Sam Wang  09:15, December 28, 2011
 * As you've said, this seems unreadable, and I do think this as well. So is there anyway to get rid of that grey line across and change it into http://images.wikia.com/communitytest/images/7/7f/Blueheader.png?  — Sam Wang  15:32, December 28, 2011

Somehow I didn't notice these additional styles you wanted. This is how you add additional styles: .WikiaArticle h2 { background: url("http://images.wikia.com/communitytest/images/7/7f/Blueheader.png") repeat-y; height:30px; width:100%; border-radius: 7px; border-bottom: none; } If you wanted to change the border to the image, instead of the header, the you might want to use the border-image property, although it's not supported by all browsers yet and somewhat difficult to properly configure. — Sovq 07:44, December 28, 2011 (UTC)
 * But now the problem is that I need a left margin because now it is too far to the left, so how should it look like? Also, the top margin is shorter than the bottom margin somehow, so what should the CSS look like? Luckily, Google Chrome is the major browser I use, so it can be supported. Also, why does the grey line still appear in the pages as a heading 2?  — Sam Wang  18:51, December 28, 2011



.WikiaArticle h2 { background: url("http://images.wikia.com/communitytest/images/7/7f/Blueheader.png") repeat-y; width:100%; border-radius: 7px; border-bottom: none; padding-left:10px; }
 * This looks decent enough to me. Here you can find all the supported styles. Try it out and see which combinations of custom styles looks best for you :) — Sovq 12:34, December 28, 2011 (UTC)

Hoverimage
I've used the hoverimage class Sovq gave me, but that is not really the style I want. The style that I really want is like the something photos on this wiki module because it turns dark in the real picture part instead of the background and that is the style I like, so how should I do with the CSS?  — Sam Wang  18:51, December 28, 2011