All TalkersCode Topics

Follow TalkersCode On Social Media

CSS3 Backgrounds

With CSS3 Backgrounds you can get more use of background properties and get more control of background elements.


The properties of CSS3 Backgrounds are

  • border-size
  • border-origin

  • You can add multiple images to background with CSS3 only on CSS3 supported browsers.


    border-size

    border-size property is used to set the size of the background image.

    Example of border-size

    div
    {
     background: url(demo.jpeg);
     background-size: 200px 200px;
     background-repeat: no-repeat;
    }
    



    border-origin

    border-origin property is used to set the positioning area of the background images.


    Example of border-size

    div
    {
    background: url(demo.jpeg);
    background-size: 200px 200px;
    background-repeat: no-repeat;
    background-origin: content-box;
    }
    

    The value of border-origin can be content-box, padding-box, or border-box area.

    ❮ PrevNext ❯