Home Events! Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
September 21, 2024 - @280.64 (what is this?)
Forum activity rating: Three Stars Posts: 38/1k.beats Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :4u: ~~~~~~~~~~~  :4u:

+  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 139 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)

Forum feature requests and Ideas

Started by MelooonBoard ⛄︎ ∙ Forum Info & Questions

Replies: 286
Views: 28763
Last post September 17, 2024 @274.87
by xixxii
xX Welcome to the Forum & Rules Xx

Started by MelooonBoard ⛄︎ ∙ Forum Info & Questions

Replies: 0
Views: 6491
Last post November 14, 2021 @627.84
by Melooon
How to use a forum?! - A guide for those who have forgotten/never knew!

Started by MelooonBoard ⛄︎ ∙ Forum Info & Questions

Replies: 2
Views: 3953
Last post April 22, 2023 @739.62
by Aloe

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


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