The background of this forum?

bingus_baby
Jr. Member ⚓︎

Baby of the bingus...

The background of this forum?

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

SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games

Re: The background of this forum?

« 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
Jr. Member ⚓︎

Baby of the bingus...

Re: The background of this forum?

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

SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games

Re: The background of this forum?

« 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

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
Jr. Member ⚓︎

Baby of the bingus...

Re: The background of this forum?

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

SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games

Re: The background of this forum?

« 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
Jr. Member ⚓︎

Baby of the bingus...

Re: The background of this forum?

« 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]

« previous next »

Vaguely similar topics! (3)