Jump to content
  • 0

Change the Background Image


TechAngel85

Question

Is there a way to change the background image of a single wiki page from the default Skyrim image? For example, if a user is creating a guide for a different game other than Skyrim, they'd be able to change the background image to something from that game. I've tried this CSS code:

body{height: 100%;width: 100%;background: url('URL TO IMAGE') no-repeat;background-position: 50% 50%;}

It should work in theory; however, it's not. In fact, when I use the code all other CSS formatting is eliminated from the page. Very strange. :psyduck:

Link to comment
Share on other sites

Recommended Posts

  • 0

Are you using an external css file for the style? I noticed that previewing a page doesn't take css into account... Also for some reason the first css selector was being ignored so I had to add a dummy style at the top of my css page...

Pretty crazy behavior.

Link to comment
Share on other sites

  • 0

Are you using an external css file for the style? I noticed that previewing a page doesn't take css into account... Also for some reason the first css selector was being ignored so I had to add a dummy style at the top of my css page...Pretty crazy behavior.

i am and linking to it within the page that needs to render the CSS. I haven't tried doing it in-line on the actual page yet. But I have a feeling it's something to do with the wiki rendering

tags.
Link to comment
Share on other sites

  • 0

i am and linking to it within the page that needs to render the CSS. I haven't tried doing it in-line on the actual page yet. But I have a feeling it's something to do with the wiki rendering

tags.

Can you point me to the page you are using it on and how you are implementing it? You should use the #css extension, and as CJ says, it strangely does not use the very first css declaration does not get applied for some reason, so just use something like:

h1 {}

... before your other style references (that is how i had to do it for the STEP GUide)call it like so from the page you want to style:

{{#css:STEP:StepGuide.css}}

See the Extension page for use-case examples

Link to comment
Share on other sites

  • 0

I am 95% certain that it is because you are using a URL to an external site. Try uploading the image and use the path to the image, like:

'../images/path/blah.jpg'

I added the correct body declaration at the top of your css, so just edit that. Use a png with transparency for the best effect.

Link to comment
Share on other sites

  • 0

I am 95% certain that it is because you are using a URL to an external site. Try uploading the image and use the path to the image, like:

'../images/path/blah.jpg'

I added the correct body declaration at the top of your css, so just edit that. Use a png with transparency for the best effect.

Does that apply to all file types or just images? I noticed fonts (.fft) do not apply either if they are from external URLs.

Link to comment
Share on other sites

  • 0

I am 95% certain that it is because you are using a URL to an external site. Try uploading the image and use the path to the image, like:

'../images/path/blah.jpg'

I added the correct body declaration at the top of your css, so just edit that. Use a png with transparency for the best effect.

Your 5% has kicked you in the butt ::P: Still doesn't work and as before, any inclusion of the "body" CSS negates the entirety of the CSS code. This is very strange behavior...worse than IE. Haha! :lol:

Link to comment
Share on other sites

  • 0

I have tried every way and trick I know to get this to work, but it refuses to comply... :dry: I'm all out of ideas. Time to dig deep into Google until s4n shows up.

 

"You must comply!" ~ Seven of Nine

 


 

Found this and it made me wonder if the page background is also hard coded into the .PHP files as the logo is:. This would account as to why it can't be changed. Regardless, this background is defined globally to the site somewhere. I'm not going to poke around as I'm sure s4n has all that locked down.

 

Can I customize the logo in the top left corner? If so, how?

The logo is a portlet block without a pBody section. It is identified by the p-logo id. The background image is specified by the $wgLogo variable, which is defined in DefaultSettings.php. This location is relative to the web server root and not the system root. Redefine this in LocalSettings.php to change the image. If set wrong there will be no image on the page; check your web server error log and adjust accordingly

Link to comment
Share on other sites

  • 0

I think I found the answer to where the background image is found. It's coded into the default (STEP) skin of the site. Changing the skin eliminates the Skyrim background image and the issue of the "body CSS" negating all the other CSS code; however, it still doesn't allow the background image to be displayed. Appears as if some of the skin's CSS is taking priority over the user's CSS (this is not normal CSS behavior though).  If I could get my hands on the original "Step.css" file, I could look into to. Sound like a job for the Dev Team.
 



Just found this:
 
 

Background image does not load properly
Hello, I'm experiencing some problems with my wiki's background image. For some reason, whenever I update the background image, the old one still presents as the current image. I have tried to switch back and forth between old and new images but nothing changed. The small preview images in the file's history indicated that there was nothing wrong with the upload process or the file (at least that is what I think), so I guess there must be some problems with displaying system. Is there anyway to overcome this? Venom00 05:52, February 16, 2011 (UTC)

- Hi, I am not a offical STAFF but I can help you

    [*]
      [*]You need to use MediaWiki:Wikia.css, put this coding down but switch BACKGROUND with the background image link

{ body.mediawiki  {  background:#0F5835 url(BACKGROUND) fixed center top repeat !important; background-repeat-x: repeat !important; background-repeat-y: repeat !important; background-color: #0F5835!important{

 

 

If these "!Important" declarations are used in the skin's CSS for the body then that is the cause of all the issues. These declarations basically nullifies all child tags that might come under it. Therefore, the skin's CSS where they're included will take priority over anything defined by the user. These declarations will need to be removed.

Link to comment
Share on other sites

  • 0

It has somthing to do with the way s4n is loading the site CSS. The background-image custom assignment voids all css, regardless of whether '!important' is used to prioritize.

 

I put in the question to to s4n, but he has not been around for a few days. Lots to do, but I unfortunately cannot do it since he is the only person that knows the config well enough to address many current issues :/

 

PS: I edited the custom css page for clarity, so please leave the body element alone until s4n responds.

Link to comment
Share on other sites

  • 0

!important is not declared in the site CSS for that element attribute, so that is not the issue. if you inspect the element, you will see that the background-image path is being pre-pended from elsewhere and the CSS is appending the path.

 

Let's let s4n explain.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site, you agree to our Guidelines, Privacy Policy, and Terms of Use.