Skip to content Skip to sidebar Skip to footer
Home / Background / Background Image / Css / Html / Tumblr

How Can I Make A Tumblr Background Image Only For One Page?

Post a Comment
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. Web

Solution 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.

Solution 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 directoryvar entry = $('#entry'); // cache the #entry selector in a variableif (!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.

Solution 3:

How about calling on the page number via {CurrentPage} and adding it as an ID? Like this:

<body id="page{CurrentPage}">

Add CSS accordingly.

#page1 { background... }

Hope this helps.

Post a Comment for "How Can I Make A Tumblr Background Image Only For One Page?"