Entrance Events! Chat Gallery Search Everyone Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
May 09, 2025 - @519.00 (what is this?)
Activity rating: Four Stars Posts & Arts: 69/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts Start New Topic  Submit Art
News: :happy: Open the all windows! Your mind needs storms and air! :happy: Super News: Upload a banner!

+  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 423 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
RSS: RSS

View Profile WWWArt

Ozwomp wants to know your locationHyperactive DonutGreat Posts PacmanOfficially DogThanks for being rad!a puppy for your travels
« 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
RSS: RSS

View Profile WWWArt

Ozwomp wants to know your locationHyperactive DonutGreat Posts PacmanOfficially DogThanks for being rad!a puppy for your travels
« 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 ♺ ∙ Web Crafting Materials

Replies: 0
Views: 1718
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: 1387
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: 1665
Last post August 31, 2022 @977.15
by Memory

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | ~ Send Feedback ~ 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