How can I make a Tumblr background image only for one page?

问题

I would like the first page on my Tumblr website to have a background image that fills the entire screen, but for that page only...the other pages will have a white background.

Website

Please help, I have been at this for a long time..no luck!

回答1:

inside the body add a wrapper (around your header, content and footer) and give it an id. set the background image of this id (e.g #page1) to whatever you like, in your case the tumblr image.

回答2:

So, the way I would do it is like this:

Create a block of html with the properties that we require that we will only show in the home page:

<div id="entry"></div>

Set the css of this to contain our image inside the style tags (or external css if you are doing it that way) and set the element to display:none as a default:

#entry {
   display:none;
   background:url("path/to/image.png") center center no-repeat;
   background-size:cover;
   ...
}

Create a custom script which checks to see if we are on the index page and if we are show the entry element otherwise hide it:

var primaryDir  = document.location.href.split("/")[3]; // get the first directory
var entry = $('#entry'); // cache the #entry selector in a variable
if (!primaryDir){ // if the primary directory is empty show the entry element
   entry.show();
}else{
   entry.hide();
}

You might need to modify the css for the entry element, but I am sure you can do that.

I've tried to add comments to explain the code.