How can I make a Tumblr background image only for

2019-09-11 11:30发布

站内问答 / HTML/CSS
1803 3 5

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!

3条回答
beautiful°
2楼-- · 2019-09-11 11:39

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.

查看更多
0人赞 添加讨论(0) 举报
看我几分像从前
3楼-- · 2019-09-11 11:54

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.

查看更多
0人赞 添加讨论(0) 举报
劫难
4楼-- · 2019-09-11 12:01

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)