Web Development

Add CSS Background

Add CSS Background is the section 4 of Beginner’s Guide to CSS.

Filling up your web page with text content is not a good way to attract readers on to your web page. It should be colorful and pretty for someone to look at. I guess you already know how to add an image to a web page using HTML tags. So what about setting that image in the background of the text. In this section here we are going to set up an image and add some color on the background of the text using CSS.

CSS Background Property

In CSS there is a property to do all the background stuff called ‘background‘. Background property comes with few additional properties of background effects. They are :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Let’s do few examples on each of them.

Background Color

The background-color property defines the background color of an element. There are three ways that we can define color on HTML.

  • As a HEX value – “#FF0000”
  • As a RGB value – “rgb(255,0,0)”
  • As a color name – “red”

For more information visit our HTML tutorial section on colors Using Colors in HTML.

Adding background color for the whole page.
Body selector is the ideal way to do that as follows.

[code language=”css”] body {
background-color: #b0c4de;
}
[/code]

Adding color to a section block.
Div selector is the ideal way to do that as follows.

[code language=”css”] div {
background-color: #E0A4BE;
}
[/code]

This is a H4 Heading

This is a paragraph text. Both Heading and Paragraph is inside of a division tag which have a background color css style.

Adding color to a specific element
Following exhibits the background color of a heading

[code language=”css”] h4 {
background-color: #7485FB;
}
[/code]

This is a H4 Heading

 

Background Image

The background-image property defines an image to use as the background of an element.

Adding a background image for the whole web page.

[code language=”css”] body {
background-image: url(“my_background_image.jpg”);
}
[/code]

Be careful to choose an image that can clearly shows the text content. If you choose a darker background image and darker text then the reader will not be able to read the text.

By default, the image is repeated both horizontally and vertically, so it covers the entire element. So if the image is so smaller than the display area of the element, then it will looks as a pattern that covers all over the element.

You can control the patternizing of the image with following property values for background-repeat property.

  • To have only horizontal repeats use property value repeat-x.
  • To have only vertical repeats use property value repeat-y.
  • To display the image only one time, use property value no-repeat. 

Background Position

When having no-repeat, you may findout the position of that image was placed by default need to be changed. See the following code snippet.

[code language=”css”] body {
background-image: url(“my_face.png”);
background-repeat: no-repeat;
background-position: right top;
}
[/code]

Background image position was change into the top right corner of the page.

Fixed Background

Use this property to have a background image fixed in place even when you scroll the page.

[code language=”css”] body {
background-image: url(“my_face.gif”);
background-repeat: no-repeat;
background-attachment: fixed;
}
[/code]

 

Background Property

Background property is a shorthand property to combine all of the above properties. Shorthand means this property shorten the code you need to write to get all of the effects regarding to the background. This can be written as follows.

[code language=”css”] body {
background: #ffffff url(“img_tree.png”) no-repeat right top;
}
[/code]

Order of the effects should be as follows.

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

You don’t need to have all the properties. But the properties you need to add should be in the above order.

So did you notice that we can have both background-color and background-image at the same time. That doesn’t make any sense isn’t it? Think about images with transparency. For example .gif and .png images. So you’ll see the background color from the transparent places whether you use property value no-repeat or not. But background-color is doesn’t meant to be with the other properties. They are related to images.


So in this section we learned how add a wonderful background for our web page with some few background effects. In the next section we’re going to learn few text effects.

 

WHAT’S NEXT?

Let’s look at how to Add CSS Text Effects.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

3 Comments on "Add CSS Background"

Notify of
avatar
Sort by:   newest | oldest | most voted
Rodolfo seay
Guest

I have read so many articles or reviews about the blogger lovers but
this post is truly a good article, keep it up.

Chadwick
Guest

Hi to every body, it’s my first pay a quick visit of this web
site; this weblog carries amazing and really excellent stuff for visitors.

Ivy
Guest

Finally, I got my website’s background working! I am new to these coding stuffs and I am happy to finally get things right with the help of your article and some online tools like: http://www.generatecss.com/css/background/ and http://css3generator.com/

wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW