¤ CSS Tutorial ¤
 Editing Backgrounds With CSS
- written by Rickasawrr
Using Css backgrounds are used to define the background properties of an HTML tag. Adding backgrounds make your webpage seem less bland and personalize your webpage. There are a couple of properties concerning Backgrounds. Ill explain each of them below:
- background-color - specifies what the background color of the page should be (by default it is white)
- background-image - specifies where the background image is located (if you'd rather use an image instead of a color)
- background-repeat - specifies whether or not you want the background image to repeat itself. (If you don't want it to repeat, you would put no-repeat instead)
- background-attachment - specifies whether or not you want the background to move when you scroll down the page. My site has a fixed background image which means the background stays put while you scroll down. If you don't want a fixed background, simply leave this out of your stylesheet.
The Background-Color Property
As stated above, the background color property determines the color of the background of an HTML tag. Again, they are determined by using Hex Code. Below is an example of a webpage background using this property:
<style type="text/css">
body{ background-color: #FFCC00; }
</style>
hello! this is a webpage!
|
and our webpage would look somewhat like this:
hello! this is a webpage!
The Background-Image Property
Again, the background-image property states the image of the background of an HTML element. All you have to do is paste the URL where it says "image.png". If you use it in clubs, please refer to the Tips and Tricks page:
<style type="text/css">
body{ background-image: url('image.png'); }
</style>
hello! this is a webpage!
|
and again, our webpage would look somewhat like this:
hello! this is a webpage!
The Background-Repeat Property
The background repeat property specifies if you want the background to repeat, and how. If it is not specified, the default is in the left corner. There are a couple of property values concerning background-repat and i would like to go over them:
- Repeat - This is the default. The specifies that the background will repeat both horizontally and vertically.
- Repeat-x - This Specifies that the background repeats only vertically.
- Repeat-y - This Specifies that the background repeats only Horizontally.
- No-Repeat - This Specifies that the background will not repeat and will only appear once.
Lets have some fun with this! In the CSS below, I specified the background image, the background color, and where it is going to repeat. You can replace "No-repeat" with any other property values i have listed above:
<style type="text/css">
body{
background-image: url('image.png');
background-color: #CC99FF;
background-repeat: no-repeat;
}
</style>
hello! this is a webpage!
|
And this is the output:
hello! this is a webpage!
The Background-Attachment Property
Lastly, The background attachment property determines if or not the background moves when you scroll, or if it just stays while the rest of the page scrolls. The Default is that the background moves when you scroll. MaraHTML's background stays while it scrolls. Here are the property values concerning the background-attachment property:
- Scroll - This is the default. This specifies that the background moves when you scroll the webpage.
- Fixed - This is what MaraHTML's background is like. This specifies that the background stays when you scroll the webpage
Here is an example of a background with the fixed property. Again, you can replace "fixed" with "scroll" if you want your background to move when you scroll:
<style type="text/css">
body{
background-image: url('image.png');
background-attachment:fixed;
}
</style>
hello! this is a webpage!
|
Here is what our code looks like:
hello! this is a webpage!
|
