Please enable JavaScript.

Coggle requires JavaScript to display documents.

4.2 More assorted CSS properties - Coggle Diagram

- - - - .sidebar { background: var(--colour-indigo-dye); }
    - - :warning: except
        
        for background position and size
  - - - body { background-image: url("./images/body-background.jpg"); }
      - get free images from unsplash
    - - body { background-size: cover; }
      - contain
        
        scales the image as large as possible
        
        without
        
        cropping
        
        stretching
        
        it will repeat the image to fill the space
        
        no-repeat will stop this #
      - cover
        
        scales the image as large as possible
        
        without
        
        stretching
        
        :!: but it will crop
        
        it will repeat the image to fill the space
        
        no-repeat will stop this #
        
        if the proportions of the image
        
        differ from the element
        
        it's cropped either
        
        vertically
        
        or horizontally
    - - .sidebar { background-size: cover; background-repeat: no-repeat; }
- - - - as a font file
    - - when the page is loaded
  - - - a weight you haven't downloaded
      - or a style - eg. bold
      - it will pick the nearest one