Minor css question and I'm asking it here instead of a generic css question board because I figure you guys know best about ways to manipulate the lists here better than anywhere else on the internet.
So on my anime list here http://myanimelist.net/animelist/nashartwell1?show=0&order=4 I am trying to take an image of the tree cropped out (I have already made that here http://i.imgur.com/VQmXzKA.png ) and put it infront of the particle effects i have going on in the background.
My problem is that I'm not sure how I can insert it between the particle effects I have and the list itself.
you can see the css I am currently using here
/* ------------------------------------------------------------ */ /* Cover art database import */
@import url(https://f3a7a1b1655de4833e3bed3b1779c5a9d85839f8.googledrive.com/host/0BxjwQr0BBXs-aDYxM2JlaFM2bnM );
/*
MAIN BACKGROUND
There's two, the first image link is for the characters and the second is for the city background.
*/
body {
background-attachment: fixed !important;
background-image: url(http://i.imgur.com/VQmXzKA.png ),url("http://i.imgur.com/mcgLZrm.jpg" );
background-position: -100px, -100px;
background-repeat: no-repeat;
background-size: cover;
background-color: black;
}
#inlineContent {
display: inline !important;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
@keyframes sparkle {
0% { background-position: 0 0, 0 0; }
100% { background-position: -150px -300px, 150px -300px; }
}
@-webkit-keyframes sparkle {
0% { background-position: 0 0, 0 0; }
100% { background-position: -150px -300px, 150px -300px; }
}
#inlineContent:before {
position: fixed;
display: block;
content: '';
left: 50%;
bottom: 13%;
margin-left: -50%;
width: 100%;
height: 100%;
background-image: url(http://i.imgur.com/O8DrcdO.png ),
url(http://i.imgur.com/FmS17ON.png );
border-radius: 50em;
animation: sparkle 15s linear infinite;
-webkit-animation: sparkle 15s linear infinite;
}
/*
CATEGORY HEADERS
header is the background color behind each pic, and the pics are found in the following 5 codes. The bottom code clears the
original text for these custom logos.
*/
.table_header {
background-color: rgba(0, 0, 0, 0.33);
}
.header_cw {
background-color: transparent;
background-image: url("http://i.imgur.com/qaTRzeR.png" );
background-repeat: no-repeat;
height: 30px;
}
.header_ptw {
background-color: transparent;
background-image: url("http://i.imgur.com/KFHhWZR.png" );
background-repeat: no-repeat;
height: 30px;
}
.header_dropped {
background-color: transparent;
background-image: url("http://i.imgur.com/vOIf9z2.png" );
background-repeat: no-repeat;
height: 30px;
}
.header_completed {
background-color: transparent;
background-image: url("http://i.imgur.com/uUi1Nxt.png" );
background-repeat: no-repeat;
height: 30px;
}
.header_onhold {
background-color: transparent;
background-image: url("http://i.imgur.com/VaYL8hy.png" );
background-repeat: no-repeat;
height: 30px;
}
.header_title {
color: transparent !important;
font-size: 0 !important;
}
/*
CATEGORY MENU BUTTONS TRANSITION SPEED
By default, set to .25th of a second (a 1/4 of a second transition).
*/
#list_surround .status_not_selected {
transition: all 0.335s ease-in-out 0s;
}
/*
CUSTOM CURSORS
The top code is for the red cursor over the list in general. The bottom two cover the green cursor that hovers over the row, and then
the same that hovers over the category menu and add/edit/more buttons.
*/
* {
cursor: url("http://i.imgur.com/b4EaEZ2.png" ), auto !important;
}
/*
CUSTOM ADD/EDIT/MORE BUTTONS
The custom More button (down arrow) and Edit/Add button (plus sign).
*/
#list_surround small a {
color: White !important;
font-size: 13px;
text-shadow: none !important;
}
a.List_LightBox {
color: White !important;
}
/*
OTHER CODES
If you need more info on customizing the layout see the original topic it was featured in.
*/
#list_surround tbody:hover td[class^="td"]:first-child {
border-radius: 5px 0 0 5px;
}
#list_surround tbody:hover td[class^="td"]:last-child {
border-radius: 0 5px 5px 0;
}
.borderRBL:hover {
color: #FFFFFF !important;
font-weight: normal !important;
}
#list_surround small a {
color: White !important;
font-size: 13px;
text-shadow: none !important;
}
#list_surround tr:hover .animetitle {
display: inline;
width: 530px;
}
#list_surround tr:hover .animetitle + small {
display: none;
}
a, .td1, .td2 {
color: #FFFFFF;
font-weight: normal;
overflow: hidden;
}
#list_surround tr:hover .td1, #list_surround tr:hover .td2, #list_surround tr:hover .td1 a, #list_surround tr:hover .td2 a {
text-shadow: -2px -2px 1px #000000;
}
a:hover {
text-decoration: underline;
}
#list_surround .table_headerLink {
color: #FFFFFF;
font-weight: bold;
}
#list_surround .header_cw, #list_surround .header_completed, #list_surround .header_onhold, #list_surround .header_ptw, #list_surround
.header_dropped {
background-color: rgba(0, 0, 0, 0.33);
border-radius: 20px 20px 0 0;
margin-left: 0;
padding: 0;
width: 535px;
}
#list_surround {
background-attachment: scroll;
background-image: none;
border-bottom: 0 solid #292929;
border-left: 0 solid #292929;
border-radius: 10px 10px 10px 10px;
border-right: 0 solid #292929;
height: auto;
margin: 0px auto 5px;
top: 20px;
}
#list_surround .status_selected a {
color: #184900;
display: block;
font-size: 1px;
height: 2px;
padding: 78px 0 0 218px;
width: 30px;
}
#list_surround .status_not_selected a {
color: #184900;
display: block;
font-size: 1px;
height: 2px;
padding: 78px 0 0 218px;
width: 30px;
}
#list_surround .animetitle + small {
color: #FF6600;
}
#list_surround .category_totals {
background-color: rgba(0, 0, 0, 0.33);
border-radius: 0 0 20px 20px;
color: #FFFFFF;
font-weight: normal;
padding: 5px;
text-align: center;
}
#list_surround .category_totals:hover {
background-color: rgba(0, 153, 51, 0.33);
transition: all 0.335s ease-in-out 0s;
}
#list_surround #grand_totals {
background-color: rgba(0, 0, 0, 0.33);
border-radius: 0 0 20px 20px;
color: #FFFFFF;
font-weight: normal;
padding: 5px;
text-align: center;
}
#mal_cs_listinfo a strong {
color: #FFFFFF;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
font-variant: normal;
font-weight: normal;
text-decoration: underline;
text-transform: none;
}
#mal_cs_otherlinks strong {
color: rgba(0, 0, 0, 0.33);
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
font-variant: normal;
}
.borderRBL {
border-color: green;
border-style: solid;
border-width: 1px !important;
}
#list_surround .header_title span {
font: small-caps 30px Verdana;
}
#list_surround .status_not_selected a {
opacity: 0;
}
#list_surround .status_selected a {
opacity: 0;
}
#copyright {
color: #fff;
height: 15px;
font-size: 10px;
text-transform: uppercase;
}
.td1, .td2 {
background-color: rgba(0, 0, 0, 0.33);
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
text-align: left;
}
*, #inlineContent {
font-family: Segoe UI;
font-size: 14px;
text-decoration: none;
}
#inlineContent {
background: none repeat scroll 0 0 transparent;
display: block !important;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
#list_surround td.table_header a:hover {
text-decoration: none !important;
}
#list_surround tbody:hover td[class^="td"]:nth-last-of-type(2) {
border-radius: 0 5px 5px 0;
}
/* FIX FOR MID TO WIDE SCREENS */
@media all and (min-device-width:1141px) {
#list_surround {
left: 240px;
width: 750px;
}
.header_cw, .header_completed, .header_onhold, .header_ptw, .header_dropped {
width: 750px !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
td[class^="td"]:nth-of-type(2) {
width: 555px !important;}
}
}
/*
FIXES - TAGS HOVER, DELETE TAGS TITLE, MAKE TAGS VISIBLE
*/
td[class^='td']:nth-of-type(6) {
visibility: hidden;
background-color: rgba(0, 0, 5, 0.85) !important;
border-color: white;
border-radius: 5px 5px 5px 5px !important;
border-style: solid;
border-width: 1px;
height: 225px;
left: 10px;
padding: 10px 10px 0 24px;
position: fixed;
top: 382px;
width: 173px;
z-index: 1;
}
.table_header:nth-of-type(6) {
display: none;
}
/*
FIXES - TAGS HOVER
*/
# {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3) !important;
color: #FFFFFF !important;
}
#list_surround tab\le:nth-of-type(n+4) tbody small {
color: cyan;
text-shadow: none;
}
#list_surround tr:hover .animetitle + small {
display: inline !important;
}
/* THUMBNAIL SETTINGS
Settings for the thumbnails of covers seen on your list. Height and width control the size, while margin-left and top can be added or taken away to change the position. Change the border size, type, or color, with the first border code.*/
.hide {
height:55px;
width:35px;
margin-left:33px;
margin-top:-65px;
border:1px solid #FFFFFF;
background-color:rgba(248, 162, 200, 0.7);
background-position:50% 50%;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
border-top-left-radius:7px;
border-top-right-radius:0;
display:inline-block !important;
position: absolute;
}
/*THUMBNAIL HOVER SETTING
This is the setting for the cover when you point to a thumbnail. Move the cover's position with the margin codes. Change its size with the padding codes. */
.hide:hover {
margin-left:-140px;
padding-right:150px;
padding-top:220px !important;
background-color:transparent;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
box-shadow:rgba(63, 52, 60, 0.55) 0 0 8px 8px;
position:absolute;
z-index:1;
}
/*THUMBNAIL HOVER FLICKER FIX
If you reposition your covers, and notice flickering, color this red, then reload your layout. Notice where the red bar appears when you point to your covers. Move that box with this code, over the parts where you point and see flickering. Then change it back to transparent!
*/
.hide:hover:after {
background: transparent;
content: " ";
height: 75px;
left: 0;
position: absolute;
top: 0;
width: 210px;
z-index: 20;
}
/*ANIMATION FOR ZOOM
Change the timing of how long it takes for it zoom out here! Its set to .25 seconds by default.
*/
* {
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
}
/*ROW WIDTH AND SPACING
This will increase the height of your rows and move the anime title to the left. It might look funny on some layouts so you'll have to adjust it or ask for help! Height is the height, padding left is the space the anime title moves from the left.
*/
.td1:nth-of-type(2), .td2:nth-of-type(2) {
height: 62px;
padding-left: 42px;
}
/*
CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT)
Used to remove the more button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that.
*/
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3),
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4),
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5),
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6),
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7),
#list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) {
display: tab\le-cell;
}
#list_surround small a:last-of-type {
display: none !important;
}
.animetitle + small {
visibility: visible !important;
}
#list_surround a[href*="http://myanimelist.net/panel.php?go=edit" ],
#list_surround a[href*="http://myanimelist.net/editlist.php?type=" ],
#list_surround a[href*="http://myanimelist.net/panel.php?go=add" ] {
visibility: visible !important;
margin-right: 10px
}
.td1:nth-of-type(6) small, .td2:nth-of-type(6) small,
.td1:nth-of-type(5) small, .td2:nth-of-type(5) small,
.td1:nth-of-type(4) small, .td2:nth-of-type(4) small {
visibility: visible !important;
}
.td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover,
.td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover,
.td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{
text-decoration: underline;
}
/* ------------------------------------------------------------ */ /* Custom MAL banner setup */
#mal_cs_listinfo,
#mal_cs_links,
#mal_cs_otherlinks,
#mal_cs_powered {
box-sizing: border-box;
background: none no-repeat scroll 100% 0 transparent;
border: 0 none;
height: 0 !important;
overflow: hidden;
padding: 32px 0 0 !important;
position: fixed;
right: 4px;
text-align: right;
top: 4px;
z-index: 10;
width: 210px !important;
}
#mal_cs_listinfo:hover,
#mal_cs_links:hover,
#mal_cs_otherlinks:hover,
#mal_cs_powered:hover {
height: 500px !important;
padding-top: 32px !important;
}
#mal_cs_listinfo div,
#mal_cs_links div,
#mal_cs_otherlinks div,
#mal_cs_powered div,
#mal_cs_powered dd {
background-color: transparent;
font-size: 0 !important;
line-height: 0;
margin: 0 !important;
opacity: 0;
padding: 4px 0 0 !important;
}
#mal_cs_listinfo:hover div,
#mal_cs_links:hover div,
#mal_cs_otherlinks:hover div,
#mal_cs_powered:hover div,
#mal_cs_powered:hover dd {
opacity: 1;
}
#mal_cs_listinfo div:nth-of-type(2),
#mal_cs_links div:nth-of-type(2),
#mal_cs_otherlinks div:nth-of-type(2),
#mal_cs_powered div:nth-of-type(2) {
padding: 4px 0 0 !important;
}
#mal_cs_listinfo a,
#mal_cs_links a,
#mal_cs_otherlinks a,
#mal_cs_powered a {
background-color: #010050 !important;
display: block;
font: 18px/17px 'Arial', sans-serif !important;
font-weight: bold;
margin: 4px 0 0;
padding: 8px 8px 8px !important;
text-decoration: none !important;
}
#mal_cs_listinfo a:nth-of-type(1),
#mal_cs_links a:nth-of-type(1),
#mal_cs_otherlinks a:nth-of-type(1),
#mal_cs_powered a:nth-of-type(1) {
margin-top: 0;
}
#mal_cs_listinfo a:hover,
#mal_cs_links a:hover,
#mal_cs_otherlinks a:hover {
background-color: #010077 !important;
}
#mal_cs_listinfo strong a strong {
font-weight: normal;
}
#mal_cs_otherlinks strong {
color: #010050;
display: block;
font: bold 13px/17px 'Arial',sans-serif !important;
padding: 0 4px 4px;
}
#mal_cs_otherlinks strong a {
background: none transparent !important;
color: #010050;
display: inline;
font: bold 13px/17px 'Arial',sans-serif !important;
margin: 0;
padding: 0;
}
#mal_cs_powered a {
background-color: white !important;
display: block !important;
margin: 0 !important;
opacity: 0;
padding: 4px 0 0 !important;
}
#mal_cs_powered:hover a {
opacity: 1;
}
#mal_cs_powered #search {
padding: 8px 2px 0px 0px !important;
position: relative;
}
#searchBox {
box-sizing: border-box;
border-color: #010050;
border-style: solid;
border-width: 1px;
color: #010050;
padding: 0 8px 0 !important;
display: inline-block;
font-family: arial, sans-serif;
font-size: 14px !important;
height: 32px;
vertical-align: top;
width: 210px !important;
}
#searchBox:hover,
#searchBox:focus {
border-color: #010077;
color: #010077;
}
#searchListButton {
display: none !important;
}
#mal_cs_listinfo {
background-image: url("http://i.imgur.com/PuFh6bg.png" );
right: 106px !important;
}
#mal_cs_links {
background-image: url("http://i.imgur.com/CVwUojN.png" );
right: 72px !important;
z-index: 9;
}
#mal_cs_otherlinks {
background-image: url("http://i.imgur.com/TaQC2Fg.png" );
right: 38px !important;
z-index: 8;
}
#mal_cs_powered {
background-image: url("http://i.imgur.com/TTbUQoO.png" );
right: 4px !important;
z-index: 7;
position: fixed !important;
}
#mal\_control\_strip {
background: transparent !important;
}
#mal_cs_pic img {
display: none !important;
}
#mal_cs_pic, #mal_cs_listinfo, #mal_cs_links {
border-right: 0 none !important;
}
I am somewhat good at css and created the current layout by combining 2 other layout i found and adding in a bit of my own code and removing extra stuff here and there, but I have a decent idea of what everything here does
I just don't know how to get the tree in front of the particle effects
Thanks for your help