- Rachael Kim
Web Programming Class 3
In class 3, we went over some more basics of HTML and CSS.
Adding external links to your webpage
<a href="google.com">LINK</a>
Above code will produce a link to Google.
*NOTE: codepen.io does not let you have an external link. If you want to test out this code on codepen, use one of the codepen URLs:
<a href="https://codepen.io/strangerintheq/pen/oNLZMYB ">LINK</a>
2. Background Images
To any HTML element, you can add a background image.
You need to edit your CSS to add background image.
.container{
background-image: url("https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png");
height:1000px;
background-size: 500px;
background-repeat: no-repeat;
}
Adding link to your image:
background-image: url("LINK");
Changing the size of your background image:
background-size: SIZE px;
Make your background image not repeat:
background-repeat: no-repeat;
Adding multiple images to your background:
.container{
background-image:url("https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png"), url("https://image.cnbcfm.com/api/v1/image/105992231-1561667465295gettyimages-521697453.jpeg?v=1561667497&w=1600&h=900");
height:1000px;
background-size: 500px, 100px;
background-repeat: no-repeat, repeat;
}
Simply add another url, separated from the first url by a comma.
To style the two images separately, add different number/style for each property, separated from the first one by a comma.