Home Help Search Login Register

Welcome, Guest. Please login or register.
May 16, 2022, 02:22:03 pm
Forum activity rating: Two Star Posts: 13/24hrs Show Unread Posts | Unread Replies | Own Posts | Recent Posts
News: ~~~~~~~~~~   <--- OMG its a worm!

+  MelonLand Forum
|-+  Workshop Zone
| |-+  Tutorials & Help
| | |-+  The background of this forum?
« previous next »
Pages: [1] Print
Author Topic: The background of this forum?  (Read 214 times)
Bingus_Baby
Newbie
*



Posts: 4
Karma: 1

View Profile WWW
« on: April 12, 2022, 04:01:06 am »

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: Today at 11:49:13 am by Melooon » Logged
Melooon
Administrator
Sr. Member
*****


So many stars!

Posts: 323
Karma: 93

SpaceHey: Friend Me!
StatusCafe: melon

View Profile WWW
« Reply #1 on: April 12, 2022, 12:29:16 pm »

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: [Select]
body {
  background-image: url('./images/starsky.gif');
  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');
  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: [Select]
#mydiv {
  width: 600px;
  margin: 10px auto;
  border: 1px dashed #6b6b6b;
  background-color: #0a0a0a;
}

Hopefully that helps!
Logged

Bingus_Baby
Newbie
*



Posts: 4
Karma: 1

View Profile WWW
« Reply #2 on: April 12, 2022, 06:14:34 pm »

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: [Select]
body {
  background-color: black;
  color: white;
  font-family: "Consolas", "Menlo", Monospace;
  background-image: url("https://c04x14l.neocities.org/important_graphics/goodnight.gif");
  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");
  background-size: 100% cover;
  z-index: -5;
}

Is there some kind of a problem, or maybe something interfering?
« Last Edit: April 12, 2022, 06:30:31 pm by Bingus_Baby » Logged
Melooon
Administrator
Sr. Member
*****


So many stars!

Posts: 323
Karma: 93

SpaceHey: Friend Me!
StatusCafe: melon

View Profile WWW
« Reply #3 on: April 12, 2022, 07:34:39 pm »

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 :P

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

Bingus_Baby
Newbie
*



Posts: 4
Karma: 1

View Profile WWW
« Reply #4 on: April 12, 2022, 09:30:20 pm »

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
Administrator
Sr. Member
*****


So many stars!

Posts: 323
Karma: 93

SpaceHey: Friend Me!
StatusCafe: melon

View Profile WWW
« Reply #5 on: April 12, 2022, 09:55:12 pm »

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

Bingus_Baby
Newbie
*



Posts: 4
Karma: 1

View Profile WWW
« Reply #6 on: April 12, 2022, 10:48:36 pm »

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 »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines RSS | WAP2 | BBCode Help


Melon Sites!
Visit Melonking.Net! Visit the MelonLand Forum! Visit the Gif Gallery! Support the Forum
Friend Communites!