What's new

Changing the background with CSS

McStormify

Expert Talker
PF Member
Messages
836
Highlights
0
Reaction score
0
Points
602
Peak Coin
0.000000¢
DB Transfer
0.000000¢
Hey guys!

In this tutorial, I'll be showing you a very basic CSS code. How to change the background.

To add a background, find or insert this code into your CSS:

Code:
body {

}

To make the background an image, put this code inside the body tags:

Code:
background-image: url('YOUR IMAGE URL HERE')

To make the background a color, put this code inside the body tags:

Code:
background-color: #ffffff

Remember to change the #ffffff to your own HTML color code.

Hope this helped :)
McStormify
 
Nice. =)

And if you want to spare some lines, you can do that in one line:
Code:
background: #ffffff url('YOUR IMAGE URL HERE')
CSS files can get really big if you become more experienced with it, you know...

Also, if you want the background image to be repeated, you can a "repeat" after the url of your image:
Code:
background: #ffffff url('YOUR IMAGE URL HERE') repeat

You can also make it repeat only horizontally or only vertically:
Horizontal:
Code:
background: #ffffff url('YOUR IMAGE URL HERE') repeat-x

Vertical:
Code:
background: #ffffff url('YOUR IMAGE URL HERE') repeat-y

If you want to center the image in the background, you can add "center" after the url of the picture:
Code:
background: #ffffff url('YOUR IMAGE URL HERE') center repeat

You can also decide whether the picture be on the top, left, bottom or right side:
Code:
background: #ffffff url('YOUR IMAGE URL HERE') center top repeat
Just change the "top" to the respective alternatives.

That`s it for now. =)
 
Thanks for adding to the tut, Cafe =) I just remembered one more:

If you want the image to stay where it is no matter how much you scroll (fix the image) use this code:

Code:
background-attachment: fixed
 
Back
Top