Hey, is is possible to use a background image instead of a color inside a div or other element?
Something like: <div style="background-image: url(something.jpg);">Text</div>
doesn't seem to work. Would this require CSS coding? If so: how?
Hey, is is possible to use a background image instead of a color inside a div or other element?
Something like: <div style="background-image: url(something.jpg);">Text</div>
doesn't seem to work. Would this require CSS coding? If so: how?
So i tried this, and it might take you defining a div class in css and then using div class=... on the actual page.
e.g. on mediawiki:common, post
.shroomfall { background: #FFFFFF url(/images/f/f2/Shroomfall.png) repeat; padding: 0.3em; color: black; border-radius: 1em; }
and then on the page
Just a nice trick if you want, even though it doesn't really use the bg but an overflow, may be something that doesn't require CSS:
<div style="display: inline-block; width: auto; height: auto; position: relative; overflow: hidden;"><!-- -->{{{text}}}<!-- --><div style="z-index: 1; position: absolute; top: 0px; left: 0px;">{{{image}}}</div><!-- --><div style="z-index: 2; position: absolute; top: 0px; left: 0px;">{{{text}}}</div><!-- --></div>
For instance:
{{This template |text= This is the town. Blah blah blah |image= images.wikia.com/clubpenguin/images/thumb/d/df/TownwithIceRink.png/280px-TownwithIceRink.png }}
Would result:
I don't know how supported this is though, and i'd recommend using the traditional usage of CSS like Geniusguy445 posted above.
Hm, I can't seem to get this to work. Maybe its a problem with the image URL. Even if I put in the actual URL of the raw image it just won't show up in the div...
EDIT: Never mind, it worked lol. Thanks guys!
I've never seen the overflow method before. I guess I learned something new as well. :)
Inline styles can NOT be used to set background images. That is, <div style="background-image:...">
. That's because it's a security risk. Someone could theoretically load a virus as a background image. If you try an inline background-image; Mediawiki nukes ALL inline styles appended to that element.
You can set a class on the image and then use Mediawiki CSS pages to append background images to that class. This is fine, but requires access to Mediawiki pages (an administrator privelege).