The background of this forum?

[bingus_baby]

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;

[Melooon]

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!

[bingus_baby]

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?

[Melooon]

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

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 ^^

[bingus_baby]

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!!

[Melooon]

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

[bingus_baby]

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