codehaven - php snippets - coding help
Generic filters
Exact matches only
    • octopus energy discount code

    What does ‘background-size’ do in CSS?

    15th February 2020

    CSS

    Css - Codehaven

    Some ways of using an image in a background.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
     
    .stretch{
    /* Will stretch to specified width/height */
      background-size: 200px 150px;
    }
    .stretch-content{
    /* Will stretch to width/height of element */
      background-size: 100% 100%;
    }
     
    .resize-width{
    /* width: 150px, height: auto to retain aspect ratio */
      background-size: 150px Auto;
    }
    .resize-height{
    /* height: 150px, width: auto to retain aspect ratio */
      background-size: Auto 150px;
    }
    .resize-fill-and-clip{
      /* Resize to fill and retain aspect ratio.
         Will cause clipping if aspect ratio of box is different from image. */
      background-size: cover;
    }
    .resize-best-fit{
    /* Resize to best fit and retain aspect ratio.
       Will cause gap if aspect ratio of box is different from image. */
      background-size: contain;
    }
     

    Was this code snippet helpful?

    RSS Latest Snippets
    LINKS
    A Repository of Code Snippets in many Programming Languages:-

    PHP – JQUERY
    CSS – MYSQL
    WORDPRESS – JAVASCRIPT
    WOOCOMMERCE – HTML

    © 2022 CODEHAVEN