Miscellaneous Part 6

This page will focus on the background and incorporation of Google fonts in the website.

Background

Our two example images each sit inside a <section>, and have a h2 within that. Here is our CSS code for the area we're using to 'host' the background image and arbitrary header:

                
                    section{
                        width:80%;
                        height:800px;
                        background-image:
                        margin:0 auto;
                      }
                      
                      h2{
                        font-size:100px;
                        color:blue;
                      }

Interestingly, it's possible to use a URL of a web image for the background-image, like this:

                
                   background-image:url(https://images.unsplash.com/photo-1);

Also, one could use their own image, like I did! This means it's easier to keep the image up-to-date.

                
                    background-image:url(../images/suarez.jpg);

Remember that unsplash.com is a fabulous resource for free images to use!

However, the image in its original form might well be too large or too small to fit the exact space! The background-size property will help, and has options including cover(which scales the image as large as possible without stretching it, cropping it vertically or horizonally to avoid empty space if necessary), contain(which scales the image as large as possible without cropping or stretching it), and auto.
```
                
                    background-size:cover; /*Crops things*/
                    background-size:contain;/*This might repeat the image...*/
                
            
```
There is a key drawback to using contain: it will repeat the image to fill the empty alloted space, which looks amateurish. The property no-repeat, which is self-explanatory, can't easily be used with the background property.
The background-position property can be used to manipulate the position of the image within your background-image. It could be cheaply used to crop out an unwanted ex from a nice family photo, for example! If you had a particularly short partner, using background-position:top; might be useful. Alternatively:
```
                
                    background-position:bottom; /*Crops out someone tall - or the top of the image!*/
                
            
```
The background-size value may ONLY be included immediately after the background-position when we're dealing with the background shorthand, separate with the '/' character, like so:
```
                
                    background: center/cover no-repeat url(../images/suarez.jpg);
                
            
```
Other common alternatives to center/cover are center/80%, left/49% etc...incidentally, Colt Steele placed no repeat after the center/cover option. no-repeat is from background-repeat

I am a heading
As a final note on image incorporation into the background, multiple backgrounds are also possible too! I place a random URL pulled from the web behind my Suarez meme, using the class multipleImages within the section to minimize CSS code.
```
                    
                        background: center/40% no-repeat url(image1),url(https://www.netsource.com);
                    
                
```
I am another heading

Google Fonts

A tool for checking out color contrast! A contrast ratio of around 7:1 is the rule of thumb right now.
This resource allows us to from a huge variety of different web-safe fonts for free! However, there is a performace aspect to this. When incorporating a Google Font, we can't just choose a huge number of fonts and different font-weights. This could significantly increase the loading time of the website!
Find the font(s) you want to use on the Google Font website, then select embed and follow the instructions shown! You get a link to the font itself, as well as an exemplar piece of CSS code. The pairings section on the site shows popular paired fonts, which will help you improve the overall look of your site.

Incidentally, use sans-serif in the body, and you can pair up other font types elsewhere! The following code helped to center the text, and made the content more readable. My own code is adjusted from this!

                
                    body {
                        font-family: Montserrat, sans-serif;
                    }
                    
                    main {
                        width: 60%;
                        margin: 0 auto;
                    }
                    
                    h1 {
                        font-size: 3rem;
                        margin-bottom: 0;
                    }
                    
                    h1 + h2 {
                        margin-top: 10px;
                    }
                    
                    h1,h2,h3 {
                        font-family: Roboto, sans-serif;
                        font-weight: 100;
                    }

Now, we'll attempt the Photo Blog codealong

Background

I am a heading

I am another heading

Google Fonts