Geek Answers Handbook

Create a star background in CSS

I am making a solar system site in pure code without using images. The problem is that I cannot figure out how to get stars in the background. I am trying to get something like a yellow raster graph on a black background. This is my code (repeating div and styling for every other planet).

html, body { width: 100%; height: 100%; background-color: black; } #sun { position: absolute; top: 50%; left: 50%; height: 200px; width: 200px; margin-top: -100px; margin-left: -100px; border-color: orange; border-width: 2px; border-style: solid; border-radius: 50%; box-shadow: 0 0 64px yellow; background-color: yellow; } #mercury { position: absolute; top: 0; left: 50%; height: 10px; width: 10px; margin-left: -5px; margin-top: -5px; border-radius: 50%; background-color: #ffd9b3; } #mercury-orbit { position: absolute; top: 50%; left: 50%; width: 260px; height: 260px; margin-top: -130px; margin-left: -130px; border-width: 2px; border-style: dotted; border-color: white; border-radius: 50%; -webkit-animation: spin-right 22s linear infinite; -moz-animation: spin-right 22s linear infinite; -ms-animation: spin-right 22s linear infinite; -o-animation: spin-right 22s linear infinite; animation: spin-right 22s linear infinite; } @-webkit-keyframes spin-right { 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin-right { 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } 
 <div id="sun"></div> <div id="mercury-orbit"> <div id="mercury"></div> </div>
+7
html css
source share
3 answers

From this , a good starry night.

 background-color:black; background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px); background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
+1
source share

I found a clean CSS solution thanks to this code handle . This will make your site look like this - unfortunately, I cannot copy-paste all CSS because it is too long (over 40,000 characters and StackOverflow allows me to paste 30,000 for a piece of code). The source code was generated using SASS and compiled, it is ridiculously long.

 <div id='stars'></div> <div id='stars2'></div> <div id="sun"></div> <div id="mercury-orbit"> <div id="mercury"></div> </div>

SASS code generating these stars:

 // n is number of stars required @function multiple-box-shadow ($n) $value: '#{random(2000)}px #{random(2000)}px #FFF' @for $i from 2 through $n $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF' @return unquote($value) $shadows-small: multiple-box-shadow(700) $shadows-medium: multiple-box-shadow(200) $shadows-big: multiple-box-shadow(100) #stars width: 1px height: 1px background: transparent box-shadow: $shadows-small
+4
source share

I wanted the stars to be slightly smaller, so I changed the macduf code a bit:

 background-color:black; background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 10px), radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 5px), radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 10px), radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 5px), radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 10px), radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 5px); background-size: 750px 750px, 550px 550px, 450px 450px, 350px 350px, 250px 250px, 150px 150px; background-position: 0 0, 40px 60px, 130px 270px, 70px 100px, 110px 200px;
0
source share

More articles:


All Articles