Forum:CSS background-image

Forums: Index > Help > CSS background-image

Note: This topic has been unedited for 5092 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.

Problem statement

I have uploaded a .GIF () that would be a fun background for a warning box or other HTML object if I could get it to tile (repeat horizontally and vertically to fill the target area). The CSS style-sheet syntax to specify this is--

style="background-image: pathname; background-repeat: repeat"

But I've been unsuccessful (in User:SPIKE/Sandbox) in specifying pathname. Comparable code works at home, but at home I know exactly where the .GIF is. There are a few examples in the Forum, and the pathname always goes two folders deep, using folder names I would not hope to guess, like /a/a0/. Where did my .GIF physically end up? and why do I have to specify an exact physical pathname at all? Spıke ¬  13:19 26-Oct-09

Discussion

http://images3.wikia.nocookie.net/uncyclopedia/images/b/b8/Tileable_star_background.GIF? Is that what you're talking about? If so, all you had to do was click on the pic, then on the pic's page, click on the pic again. If not, I can't help you. Sir Modusoperandi ^Boinc! 17:07, October 26, 2009 (UTC)

All I had to do was know that. Thanks for the method to see the absolute pathname. (Is it guaranteed that the illustration will remain in /b/b8, whatever that is, permanently?) (As of now, I'm still doing something wrong syntactically that leads CSS to bounce the entire style rule, in the hallowed UNIX tradition of "failing silently.") Spıke ¬  22:45 26-Oct-09

"Is it guaranteed"? No. Nothing is. Computing is living on the edge, man, dividing by zero, eight nanoseconds to armageddon! Xtreme computing! Woo! Sir Modusoperandi ^Boinc! 23:57, October 26, 2009 (UTC)

Sorry, the question was rhetorical. The point is that it may be Xtreme but it is less robust to have to specify a picture's exact directory. Of course I'm impressed that an article and its media might be effortlessly located on different continents. But User:SPIKE/Sandbox both verifies that the file exists and fails to grab it into a style rule after trying a dozen permutations. A search suggests that it might suffice to truncate it at /images/b/b8/Tileable_star_background.GIF, but nothing works. Spıke ¬  00:44 27-Oct-09

Would it help if I told you that, other than whateveritwas I said before, I know nothing? Nothing! Sir Modusoperandi ^Boinc! 00:47, October 27, 2009 (UTC)

It would probably mark the end of this pleasant conversation and leave me waiting for another knowledgeable person to stroll past with that part of the puzzle. Thanks for your time. Spıke ¬  00:50 27-Oct-09

Oh. If you want that, ask Spang. Sir Modusoperandi ^Boinc! 04:50, October 27, 2009 (UTC)

Solution

Mediawiki strips out all url() references in CSS, because apparently having viewers load any url is bad, even though the links are local and you can load any image anyway by just pasting the url. The implementation of it is bad. The only way to make it work normally would be to get wikia to modify the sanitizer::checkCss function, which is never going to happen, but you're welcome to ask.

One way to do what you want to do would be to give a class to your image instead, and add the background-image to that class in the global css. Which is kinda pointless unless you're going to be making a lot of similar templates with the same background image. The only other thing I can think of would be to add a javascript function that adds the background back in for anything, maybe using a template. • Spang • ☃ • talk • 23:03, 27 Oct 2009

Thanks for the reply! It's a relief to hear a simple explanation for an hour of failing to get obvious syntax to produce the desired result. Indeed I won't request a change, as there is no reason why this has to be gotten to work here. Spıke ¬  23:21 27-Oct-09

PS--MediaWiki seems to remove the entire style="..." clause that contains the url() syntax. An alternative to modifying the Uncyclopedia CSS was to modify the style sheet on my computer that governs the browsing session. Spıke ¬  00:40 28-Oct-09

Alternative solution

I've been playing with this for a while, and I have gotten it to work to a certain extent, but not perfectly, and all through a number of little tricks.

Example 1: UnTunes:The Online Stalker The record cover image is actually a div with the image pasted in it, and then a div with relative position pasted over the top of that, which also includes another image as part of a click-inline. So the code (cut down a little) is as follows:-

<div style="width:200px; height: 200px; overflow: hidden; border: 1px solid black; padding:0px; 
text-align: right; padding-top:11px;">
[[Image:The graduate stalker.png|left|200px]]
<div style="position:relative; top: -199px; z-index:2; padding-right: 5px;">
MUSIC FROM THE MOTION PICTURE<br />
THE STALKER<br />
LYRICS '''PAUL SIMON'''<br />
'''SIMON & GARFUNKEL'''<br />
<div style="position:relative; top: 129px; z-index:2;">
{{click-inline
|image = HMV logo.GIF
|link=User:PuppyOnTheRadio
|width=25px
|height=50px
|title=PuppyOnTheRadio was here.}}<br />
<small>HMV</small>
</div>
</div>
</div>

Example 2: Microsoft Knowledge Base The lower header does this thing where it fades from the top to the bottom and then has the Microsoft logo on top (aping the style of [1]). I could do this with an image, but I had to have the image running the entire way across the screen, and I didn't want to mess this up on lower resolution screens. So this works again with divs and positioning. Code is as follows:-

<!--
    Right hand lower header background
-->
<div style="position: absolute; top:0px; right:0px; height: 95px; width: 800px; z-index: 2; padding: 0px;">
[[Image:Ms kb background.PNG]]
</div>
<!--
    Left hand lower header background
-->
<div style="position: absolute; top:0px; left:-156px; height: 95px; width: 800px; z-index: 1; 
padding: 0px;">
[[Image:Ms kb background.PNG]]
</div>
<!-- 
    Logo and stuff
-->
<div style="position: absolute; top:34px; left:-136px; z-index: 2; padding: 0px;">
[{{server}}:{{localurl:Microsoft}} http://images4.wikia.nocookie.net/uncyclopedia/images
/a/ad/Microsoft_logo_white.gif]
</div>

I have been playing around with the idea of tiled images as well, and I'm partially there. I have managed to do it once but it had problems on some browsers, but that may have been due to a typo in the code that I didn't realise was there until I'd given up trying. If you manage to come up with any other tricks then please let me know. Pup 00:55, 28/10/2009

The thing is that the "position" thing makes the thing disappear on some browsers. I don't think there are lots of people with a lame browser like that though. —Sir Socky (talk) (stalk) GUN SotM UotM PMotM UotY PotM WotM 23:51, 2 November 2009

Using "margin" with a negative value might render a similar result to the position thing, but I haven't really tried testing that out. —Sir Socky (talk) (stalk) GUN SotM UotM PMotM UotY PotM WotM 23:53, 2 November 2009

Thanks! In fact, a couple weeks ago, I saw how you had patched over the Uncyclopedia potato and imitated it on my talk page. (It works here, but I'm using a local style sheet tailored for the Wikipedia "Modern.css" skin; other people may see Spike the Dog in the wrong place.)

In User:SPIKE/Sandbox, one of my experiments is to manually tile the Stars picture by repeating the File:... syntax the necessary number of times. This could probably be achieved with Javascript, which could actually compute how many times that is (but couldn't clip to the edge of the object). Using Mozilla's userContent.css file, and Spang's suggestion of declaring the table to be of a certain class, I've gotten the tiled background to work (on my PC only), and to work for an article's Table of Contents.

The experimentation has been fun, but the only practical use might be when Dylanlip went around replacing Stop and Yield signs with prettier ones, as people were saying Wikipedia is getting prettier than us. Background images for templates (if only color gradients) would be a way to leapfrog them. Spıke ¬  01:12 28-Oct-09

I was thinking of a div with overflow hidden and set height and width (although the latter could be a percentage of screen) and having the image repeated a significant number of times - if it's repeated more than the div will display then there's no loss as it will not display anyway. If you have that with a positioning behind text that has been put there... My internet has been capped for the month so I'm browsing sans images at the moment because otherwise I slow to a standstill, but I might work on it over the weekend. Pup 01:44, 28/10/2009

When I said I'd work on it over the weekend I didn't specify what weekend, did I? Pup

Not a problem! An older collaborator of mine who worked at Unisys once lamented about all the time they were spending in his department to "do the same thing, only prettier," and that is all I was doing here--see my previous comment here about the "only practical use." It only became an obsession when I became sure that my coding was correct but the results weren't forthcoming. It's not even clear that I would ever put a template with a starry background in any of my pages. If anyone else is holding his breath over this capability, I'd rather see them drop the prohibition against the use of the url() syntax in style clauses, than a clever programmatic workaround. Spıke ¬  11:54 10-Nov-09

PS--I now have a tiled blue-star background for Uncyclopedia page titles, via my local Mozilla userContent style sheet. No one else can see it...unless they really want to. Spıke ¬  02:21 12-Nov-09

I have worked and worked on this, and the end result is this - I can get this to work in that if you don't adjust the size of the area that you are wanting to do a background image on, then it's fine, but anything beyond that would need access to coding that I don't have access to, with one minor exception. We can use flash on these pages, although the user can choose not to view pages that have flash. I have never coded with flash so I'm only assuming that it could be used for what we are talking about. Having said all that, I'm not inclined to pursue it as I don't have a need for it beyond what I've already done. There may be a time when I envisage a use for it (there is a kernel of thought about it at the moment), but not today. Pup