css infinite hue-rotate animation for the background image? - ☔︎ ∙ I need Help!

Noonbeam
Jr. Member

your local strange vocathing! ^_^
⛺︎ My Room
Itch.io: My Games

Artifacts:

css infinite hue-rotate animation for the background image?

« on: a Summer night »

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

https://file.garden/Za8b_JenwWPK30ab/neocities/heeeeelp%20help%20meeee/hue%20rotate%20code%20help.png


	Logged

SPIRIT AND OPPORTUNITY REPEATS WITH EACH NEW ROVER !

https://file.garden/Za8b_JenwWPK30ab/misc/CURIOSITYYY.gif

noonbeam || gif by me :3

Melooon
Hero Member ⚓︎

So many stars!
⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games
RSS:

Guild Memberships:

Artifacts:

Re: css infinite hue-rotate animation for the background image?

« Reply #1 on: a Summer night »

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

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!


	Logged

everything lost will be recovered, when you drift into the arms of the undiscovered

Artifact Swap:

Noonbeam
Jr. Member

your local strange vocathing! ^_^
⛺︎ My Room
Itch.io: My Games

Artifacts:

Re: css infinite hue-rotate animation for the background image?

« Reply #2 on: a Summer night »

Quote from: Melooon on a Summer night

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

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!

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

https://file.garden/Za8b_JenwWPK30ab/neocities/heeeeelp%20help%20meeee/hue%20rotate%20code%20help%202.png

+ the specific errors i got for that one line

https://file.garden/Za8b_JenwWPK30ab/neocities/heeeeelp%20help%20meeee/hue%20rotate%20code%20help%202.5.png


	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:

Itch.io: My Games
RSS:

Guild Memberships:

Artifacts:

Re: css infinite hue-rotate animation for the background image?

« Reply #3 on: a Summer night »

Quote from: Noonbeam on a Summer night

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

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


	Logged

everything lost will be recovered, when you drift into the arms of the undiscovered

Artifact Swap:

Pages: [1]

« previous next »