Home Events! Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
November 23, 2024 - @927.14 (what is this?)
Forum activity rating: Three Stars Posts: 34/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts    Start New Topic
News: :skull: Websites are like whispers in the night  :skull:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  The background of this forum?


« previous next »
Pages: [1] Print
Author Topic: The background of this forum?  (Read 2088 times)
bingus_baby
Full Member ⚓︎
***


Baby of the bingus...

⛺︎ My Room

View Profile WWW

First 1000 Members!Joined 2022!
« on: April 12, 2022 @125.76 »

I absolutely adore the background of this forum, the way there's clouds with the stars on top! But what I like most is how the stars scroll, but the bg image sticks in place. How would I do that in my own site?

And what kind of element would you call the text boxes in the middle (like the main body text) is called?

Thank you for reading! And sorry if this all has been asked before, I'm pretty new here! ;v;
« Last Edit: May 16, 2022 @450.84 by Melooon » Logged


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: April 12, 2022 @478.66 »

Hi, welcome to the forum, and glad you like the design!

Its actually a really common trick I use on my sites, the body has a regular background image; then there is an empty <div id="shade"></div> that is fixed and stretched and has the clouds as its background.

There is a bit of a glitch going on here because apparently "100% cover" is not a real setting, but it works so screw it!

Code
body {
 background-image: url('./images/starsky.gif':wink:;
 background-color: black;
 background-size: 150px;
}

#shade {
 float: left;
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0px;
 left: 0px;
 background-image: url('./images/dust-clipart-cloud-smoke-12.png':wink:;
 background-size: 100% cover;
 z-index: -5;
}

I'm not fully sure what you mean by "text boxes in the middle" if you just want to center some content you can put it in a div and set a width and margin like so, then you can give it a background color and border to make it look like it is here!
Code
#mydiv {
 width: 600px;
 margin: 10px auto;
 border: 1px dashed #6b6b6b;
 background-color: #0a0a0a;
}

Hopefully that helps!
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
bingus_baby
Full Member ⚓︎
***


Baby of the bingus...

⛺︎ My Room

View Profile WWW

First 1000 Members!Joined 2022!
« Reply #2 on: April 12, 2022 @718.45 »

Thank you so much for the help!!! And what I figured out what that what I was looking for is how to use the <table> tags for layout. What I wanted was so I could put all my body text there so it's easier to read. I was able to get it working on my site after looking a few things up and finding out what I was even looking for! And again, thank you for your reply!!

Edit: It doesn't seem to work on my site, though. I have it pasted like this-

Code
body {
 background-color: black;
 color: white;
 font-family: "Consolas", "Menlo", Monospace;
 background-image: url("https://c04x14l.neocities.org/important_graphics/goodnight.gif":wink:;
 background-repeat: repeat;
 background-size: auto;
 text-align: left;
}

#shade {
 float: left;
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0px;
 left: 0px;
 background-image: url("https://c04x14l.neocities.org/important_graphics/starry_overlay.gif":wink:;
 background-size: 100% cover;
 z-index: -5;
}

Is there some kind of a problem, or maybe something interfering?
« Last Edit: April 12, 2022 @729.53 by Bingus_Baby » Logged


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: April 12, 2022 @774.06 »

Skimming your index page, it looks like you didn't put the <div id="shade"></div> on the page, so the style wont do anything :tongue:

It needs to go right after your <body> tag for best results. ALSO You MIGHT sometimes find that there is a blank space at the top where the background does not show, if you run into that make sure nothing is adding margins to the body ^^
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
bingus_baby
Full Member ⚓︎
***


Baby of the bingus...

⛺︎ My Room

View Profile WWW

First 1000 Members!Joined 2022!
« Reply #4 on: April 12, 2022 @854.40 »

That did the trick! I tried it over on this page https://c04x14l.neocities.org/home.html, but it seems to have frozen the background GIF, which isn't a big deal, but now the cursor glitter trail doesn't work and the page won't scroll.

I really appreciate your help with this!!
Logged


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 #5 on: April 12, 2022 @871.67 »

You need to close the div, its <div id="shade"></div> with nothing inside it!
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
bingus_baby
Full Member ⚓︎
***


Baby of the bingus...

⛺︎ My Room

View Profile WWW

First 1000 Members!Joined 2022!
« Reply #6 on: April 12, 2022 @908.75 »

That fixed it, thank you so much!!!!!!! I really appreciate your help, my site is going to look so snazzy now!!! ♡
Logged


Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

Forum feature requests and Ideas

Started by MelooonBoard ⛄︎ ∙ Forum Info & Questions

Replies: 319
Views: 30897
Last post Today at @926.49
by dream
xX Welcome to the Forum & Rules Xx

Started by MelooonBoard ⛄︎ ∙ Forum Info & Questions

Replies: 0
Views: 6838
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: 4141
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 | 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