This topic is part of our CSS Tutorials and Add-ons section: https://myanimelist.net/forum/?topicid=2077862 Six different backgrounds that can be changed! :D       With this code, you should be able to have a separate background for each category page on any layout! It goes on the bottom. Change the direct links in the parenthesis for different backgrounds. You can get direct links for new images by logging into an Imgur account, uploading the images, and then go to Images on the upper right (click on your username) and click on your image: https://i.imgur.com/sPeZ6kF.png. As an alternative, you can use Postimages.org for a direct link.
/*CURRENTLY WATCHING WALLPAPER
To change background images: Delete what's in the parenthesis. Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save.
*/
body[data-query*='"status":1'] {
background-image: url(https://i.imgur.com/wWFNGHr.jpg) !important;
}
/*COMPLETED WALLPAPER*/
body[data-query*='"status":2'] {
background-image: url(https://i.imgur.com/lDzDDe7.jpg) !important;
}
/*ON HOLD WALLPAPER*/
body[data-query*='"status":3'] {
background-image: url(https://i.imgur.com/E3EzRRD.jpg) !important;
}
/*DROPPED WALLPAPER*/
body[data-query*='"status":4'] {
background-image: url(https://i.imgur.com/2lvLCq7.jpg) !important;
}
/*PLANNED WALLPAPER*/
body[data-query*='"status":6'] {
background-image: url(https://i.imgur.com/oVpAs9w.jpg) !important;
}
/*ALL ANIME/MANGA WALLPAPERD*/
body[data-query*='"status":7'] {
background-image: url(https://i.imgur.com/vwVXHGS.jpg) !important;
}
body[data-query*='"status":1'],
body[data-query*='"status":2'],
body[data-query*='"status":3'],
body[data-query*='"status":4'],
body[data-query*='"status":6'],
body[data-query*='"status":7'] {
background-attachment: fixed !important;
background-position: 50% 50%;
background-repeat: no-repeat !important;
background-size: cover;
}Change the background by the tag  In the example pic, I clicked the "shonen" tag on an anime, and the background changes to a special background for this tag. You can make custom backgrounds for a tag with this code, just change "Shonen" with your own tag. body[data-query*='Shonen'] {
background-image: url(https://i.imgur.com/cdokuKi.jpg) !important;
background-attachment: fixed !important;
background-position: 50% 50%;
background-repeat: no-repeat !important;
background-size: cover;
}Different cover image/banner for each page
/*CURRENTLY WATCHING BANNER
To change background images: Delete what's in the parenthesis. Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save.
*/
[data-query*='"status":1'] .cover-block .image-container,
[data-query*='"status":1'] .cover-block {
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwJm1eOb8TWkyv3gu3BECAVc) !important;
}
/*COMPLETED BANNER*/
[data-query*='"status":2'] .cover-block .image-container ,
[data-query*='"status":2'] .cover-block{
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwILR5rUgLcNd7kV1uIV2azE) !important;
}
/*ON HOLD BANNER*/
[data-query*='"status":3'] .cover-block .image-container,
[data-query*='"status":3'] .cover-block {
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwMZ0D4vUFnwbES2RAjmJIak) !important;
}
/*DROPPED BANNER*/
[data-query*='"status":4'] .cover-block .image-container,
[data-query*='"status":4'] .cover-block {
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwDxEdPucEdhGyFDBWz8osHs) !important;
}
/*PLANNED BANNER*/
[data-query*='"status":6'] .cover-block .image-container,
[data-query*='"status":6'] .cover-block{
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwB4u5E1Al-Wm3GygJ0sYUlE) !important;
}
/*ALL ANIME/MANGA BANNER*/
[data-query*='"status":7'] .cover-block .image-container,
[data-query*='"status":7'] .cover-block{
background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwFGHS19EiHgdhR2LlkJE4N4) !important;
}
.cover-block .image-container .lazyloaded{
opacity: 0;
}
.cover-block{
height: 600px;
} |
Shishio-kunFeb 21, 2023 10:01 AM
More topics from this board
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7813 |
by takkun_
»»
4 hours ago |
|
» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )Shishio-kun - Sep 4, 2020 |
121 |
by Pokitaru
»»
Apr 21, 3:25 AM |
|
» [CSS-MODERN] Change list text/font colors on any list layoutShishio-kun - May 4, 2021 |
3 |
by hideso
»»
Apr 20, 4:33 PM |
|
» [CSS] [VIDEO GUIDE] ⭐️ How to change fonts on a list layoutShishio-kun - Jul 15, 2019 |
17 |
by hideso
»»
Apr 20, 4:03 PM |
|
» [CSS][Modern] ☀️ Endless Summer Layout by Cateinya ( 1 2 3 4 5 ... Last Page )Cateinya - Aug 18, 2016 |
309 |
by hideso
»»
Apr 20, 3:56 PM |