CSS Background The background-color is CSS property that specifies the background color of HTML elements Background-image Background-repeat Background-position Background-attachment Background – shorthand property
I the previous chapter of CSS tutorial we learnt about CSS colors and now in this chapter we will study about CSS backgrounds.

But before we move ahead we can over-view the CSS background properties.

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

Let’s start now!

Background-color


The background-color is CSS property that specifies the background color of HTML elements.


body{
 background-color: #DDDFFF;
}
h1{
 background-color: #156938;
}
p{
 background-color:orange;
}
div{
 background-color:rgb(255,38, 30);
}

The above example will produce below result

Result

CSS background-color property receives only valid color names, HAX color values, RGB color values, HSC color value etc. If there is any trouble with you then you may go through the previous chapter which describes the CSS colors. Click Here CSS Tutorials - CSS Colors.

Background-image


CSS background-image property sets the image to HTML elements. Check the below example, how to set the image to HTML Elements.


body{
 background-image:url('background.jpg');
}

Tips: Be careful while using background image. When using background image, always use an image that don’t disturb the visibility of text using over image.

Below is an example that shows the improper use of the background image.


body{
 background-image:url('badbackground.jpg');
}

Background-repeat


By default the CSS background-image property repeats the image horizontally and vertically so that it can cover the entire element. Sometimes it looks awkward. For example


body{
 background-image:url('background1.jpg');
}

CSS background-repeat property can control it and allow repeating only vertically, only horizontally or no-repeat.

Horizontal repeat 


To repeat image horizontally, use (background-repeat: repeat-x). Follow the below example.


body{
 background-image:url('background1.jpg');
 background-repeat:repeat-x;
}

Vertical repeat


To repeat an image vertically, use (background-repeat: repeat-y).


body{
 background-image:url('background1.jpg');
 background-repeat:repeat-y;
}

No Repeat


To disable the repeat of an image in an element use (background-repeat: no-repeat). If the image is totally got fit to element, then it will not repeat by default.


body{
 background-image:url('background5.jpg');
 background-repeat:no-repeat;
}

Background-position


Use of CSS background-position is ideal when we do not want to repeat the image and set the image position to the element as we want.

In above example image is not repeating but it also not looks great. We can change its position using CSS background-position properties.


body{
 background-image:url('background5.jpg');
 background-repeat:no-repeat;
 background-position:right top;
}

Background-attachment


Sometime we do not want to scroll the background-image along with scroll bar. This can be done by using CSS background-attachment property. By default image is scroll with scrolling the scroll bar.
If we use (background-attachment:fixed; ) image will be fixed and not scroll.


body{
 background-image:url('background5.jpg');
 background-repeat:no-repeat;
 background-position:right top;
 background-attachment:scroll;
}

If we use (background-attachment:scroll;)image will be fixed and scroll.


body{
 background-color: #C6E6FD;
 background-image:url('background5.jpg');
 background-repeat:no-repeat;
 background-position:right top;
 background-attachment:scroll;
}

Background – shorthand property


It is possible to define all the background properties in a single property. This is call background shorthand property.


body{
 background: #C6E6FD url('background5.jpg') no-repeat right top fixed;
}

Related Topics

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

7 comments:

  1. Whatever your need might be, it is essential to disclose it well to the organization you will re-appropriate the errand to. anime eye

    ReplyDelete
  2. This is the sort of information I’ve long been in search of. Thanks for posting this information. ux designer san francisco

    ReplyDelete
  3. Hi there, just became aware of your blog through Google, and found that it’s truly informative. I’ll be grateful if you continue this in future. Lots of people will benefit from your writing. Cheers! ux designer san francisco

    ReplyDelete
  4. I was suggested this website by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my trouble. You are wonderful! Thanks!Nice blog here! Also your web site loads up fast! What web host are you using? Can I get your affiliate link to your host? I wish my website loaded up as quickly as yours lol apple phone mockup

    ReplyDelete
    Replies
    1. Brother this blog is built over blogger so there no need of web host. If you'r finding your web site loads up slowly then reply me, I'll help you and also get my contact no +91-8873040871. it's on whatsapp you can join me over there. Donot forget to mention that your are using wordpress or not

      Delete
  5. great resources here. Ill be back for the next your posting. keep writing and happy blogging. ipad mockup

    ReplyDelete
  6. That is really nice to hear. thank you for the update and good luck. this

    ReplyDelete