Home Events! Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
November 21, 2024 - @893.44 (what is this?)
Forum activity rating: Three Stars Posts: 27/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts    Start New Topic
News: :ozwomp: Reminder: Forum messages stay readable for years! Keep yours high quality! :ozwomp:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  css infinite hue-rotate animation for the background image?


« previous next »
Pages: [1] Print
Author Topic: css infinite hue-rotate animation for the background image?  (Read 203 times)
Noonbeam
Casual Poster ⚓︎
*


your local strange vocathing! ^_^

⛺︎ My Room
Itch.io: My Games

View Profile WWW

Sun BeamedJoined 2024!
« on: August 04, 2024 @809.54 »

AND WE'RE BACK IN THE HELP FORUM BABY 🔥🔥🔥🔥🔥 ive been googling and ive got some things written down but it wont work, i think its because its not specifying that its gotta be the background image that does hue-rotate but i dont actually know how to do that 💔 heres the code i have vvv
Logged

SPIRIT AND OPPORTUNITY REPEATS WITH EACH NEW ROVER !

noonbeam || gif by me :3
Melooon
Hero Member ⚓︎
*****


So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

Thanks for being rad!a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!...
« Reply #1 on: August 04, 2024 @817.82 »

U made a CSS class called "hue-rotate" so you need to apply the class to something  :tongue:

E.g. <body class="hue-rotate"> if you wanted to apply it to the entire webpage.

As for making it apply to ONLY the background image; youd need to make a fake background and then apply it to that, e.g.

Code
<div id="mybg" class="hue-rotate"></div>

Then in CSS - you can do this which makes it will make it fill the page and float behind everything like a background.
Code
#mybg{
    background-image: ur image link etc
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: -10;
}

You might need to tinker a bit to make it actually fill the page (try making the html, and body 100% wide and tall) and avoid body padding which will mess with it!

The hue animation is a really cool idea and Id love to see how it works out!  :ha:
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
Noonbeam
Casual Poster ⚓︎
*


your local strange vocathing! ^_^

⛺︎ My Room
Itch.io: My Games

View Profile WWW

Sun BeamedJoined 2024!
« Reply #2 on: August 04, 2024 @919.58 »

U made a CSS class called "hue-rotate" so you need to apply the class to something  :tongue:

E.g. <body class="hue-rotate"> if you wanted to apply it to the entire webpage.

As for making it apply to ONLY the background image; youd need to make a fake background and then apply it to that, e.g.

Code
<div id="mybg" class="hue-rotate"></div>

Then in CSS - you can do this which makes it will make it fill the page and float behind everything like a background.
Code
#mybg{
    background-image: ur image link etc
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: -10;
}

You might need to tinker a bit to make it actually fill the page (try making the html, and body 100% wide and tall) and avoid body padding which will mess with it!

The hue animation is a really cool idea and Id love to see how it works out!  :ha:

no idea if you got a ghost notification for that but i accidentally posted it early </3 anyway im not sure where i go from here [and also css doesnt like that first thing </3], ive tried making the background a different image and getting rid of the background-image at the top, but neither of those seemed to work. sorry if im missing something HGDFLAVFKJN



+ the specific errors i got for that one line


Logged

SPIRIT AND OPPORTUNITY REPEATS WITH EACH NEW ROVER !

noonbeam || gif by me :3
Melooon
Hero Member ⚓︎
*****


So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

Thanks for being rad!a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!...
« Reply #3 on: August 04, 2024 @922.45 »

sorry if im missing something HGDFLAVFKJN
Ooph, CSS is not HTML, you cant mix the two like that; I think it might be a good idea if you went back and read a basic web crafting guide  :ohdear:

I have one on my website; but the W3Schools have seprate ones for HTML and CSS that are very good!

I think you should ignore my previous post and keep it simple until you understand the basics  :4u:
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

A cool dummy image generator

Started by PepyogurtBoard ☆ ∙ Showcase & Links

Replies: 0
Views: 1303
Last post July 03, 2022 @168.19
by Pepyogurt
Does anyone know (or use) an image host site?

Started by KikoBoard ✁ ∙ Web Crafting

Replies: 4
Views: 1220
Last post August 08, 2022 @75.16
by Kiko
5 Reasons to use Alt-text and Image Captions (Beyond Accessibility)

Started by MemoryBoard ✁ ∙ Web Crafting

Replies: 6
Views: 1350
Last post August 31, 2022 @977.15
by Memory

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi