Backgrounds are essential for great web designing, and the one you choose for yours can set the overall tone of your website. I use backgrounds a lot. They can be either colors or images, and they really enhance the design of a website. In this tutorial we will be learning CSS coding of backgrounds.
Learning CSS Coding With Backgrounds
I use backgrounds alot in my web designs. Backgrounds can be either colors or images and can be added to any element on your site.
So you can use them as the main background on your site, or individual smaller elements can all have backgrounds in your web design.
Here are some useful background styling codes:
Listing background: sets the background properties for an element. This is normally used on its own for just a simple color code.
Here we have our body tag with open brackets and we are using the background element, colon and the #ffffff; which is the color white. Then we have the closing bracket.
Now just remember, this is just a snippet of the code, this is not a complete styling code, I am just using this version to help the explanation.
Heres another one background-image. Listing background-image: sets the background image for an element.
Here’s an example of this in action:
Site-header, this is for a WordPress code, you will learn more about this in another WordPress tutorial. But, for a site-header, lets say we want to use an image for our header, we can go ahead and code it like this.
So, we have our site-header, opening bracket, background element, then we write URL to let it know that we are about to put in a url for our image, then we close the bracket.
Next background-attachment: Listing background-attachment: sets whether the image will be fixed or scroll. This is mostly used for full site backgrounds.
Sometimes you may want, when the reader scrolls down your page, for that image to move with you. Personally, I prefer it to be fixed, so that it stays in one place as you scroll down the page. So, its really just the text and the content that scrolls as the reader scrolls down the page.
Here’s an example:
So here is adding on to our previous example, I have added the background-attachment: tag, and set it to fixed. Then ended it with the semi-colon.
Normally, by default, its set to scroll, so if you don’t want it to scroll, then you need to change it to fixed.
The next one is background–repeat: This sets how the image will repeat. For site backgrounds, you want it to repeat. But, in other areas you don’t.
Here’s an example:
So, we have the same example we started with, the body tag followed by opening bracket, then on the next line we have the back-ground image set to an URL, and on the next line we decide to use background-repeat and set it to repeat. Then we close the bracket on the next line.
Backgrounds Add Uniqueness To Web Design
So thanks for reading my article on coding backgrounds in CSS. I think you will see that backgrounds add a uniqueness to your web design. So go ahead and just play around with the code and get comfortable adding backgrounds to your site.
What background will you use on your site? Will it be a color or an image??
In the next tutorial in the series, Learning CSS Code Part 7-Coding Fonts with CSS, we will learn how to code fonts in CSS.
Latest posts by Robin McDonald (see all)
- Optimize Your WordPress Images With ShortPixel - January 15, 2018
- How To Increase Your SEO By Adding Keywords And Meta Descriptions In WordPress Posts And Pages - November 20, 2017
- Uninstalling a WordPress Plugin And Why Its Important - October 30, 2017