In this article, we will see how to create the galaxy background using the HTML & CSS, along with knowing the basic CSS properties used & will understand it through the example. A galaxy background means a small bunch of circles having different sizes with different shades and a dark background. This task can be accomplished by utilizing the following CSS properties:
background-color: This property is used to implement the black-background color to the body element. The background covers the total size of the element with padding and border but excluding margin.
border-radius: This property is used to round the corners of the outer border edges of an element. Here, we have used this property to create the circular star-shaped symbol.
box-shadow: This property is used to give a shadow-like effect to the frames of an element. The multiple effects can be applied to the element’s frame which is separated by the comma. Here, we have used this property to add the shadow effect to the circular star-shaped symbol.
height: This property is used to set the height of the element. Here, we have used this property to add height to the circular star-shaped symbol.
width: This property is used to set the width of the element. The width can be assign to the text and images in the form of pixels(px), percentage(%), centimetre(cm) etc. Here, we have used this property to add width to the circular star-shaped symbol.
Approach: In order to create the galaxy background, we will define a <div> element and an image, along with having a class as .gfg that will contain the above required styling properties to utilized them to make the stars of different sizes with a dark background.
Example: In the below example, we have created a galaxy in the background using the basics of HTML and CSS.
