Look to the Sky – background-size and custom fonts

The background-size property is the primary focus of this exercise. I was inspired by the album cover from The Neighbourhood album I Love You. I was thinking it had a simple portfolio landing-page look, so I used it as my inspiration for this project.

I used a great, large sky image that I optimized in Photoshop and lovely icons from IcoMoon. I customized the icons used in this project to be entered as fonts. This will let me easily change the style (especially hover effects) on each of the icons.

Here is the HTML to start.

HTML:
<ul>
<li>
<a class="icon earth" href="#">e</a>
</li>
<li>
<a class="icon heart" href="#">h</a>
</li>
<li>
<a class="icon gift" href="#">g</a>
</li>
</ul>

Now that the HTML is setup, lets look at the CSS.

I am using a font import from IcoMoon in the CSS, which has fairly wide support, except for IE 8 and prior.

I’ll declare my custom font name and source by using @font-face.

CSS:
@font-face {
font-family: "Into Open";
src: url('Into Open.ttf'),
url('Into Open.eot');
}

Then, I added the font-family to my links.

CSS:
.earth,
.heart,
.gift {
font-family: "Into Open";
font-size: 4em;
}

Then, I add the background using background-size with a value of cover. The value cover will make the background scale as it is resized. Set the following up and re-size your browser, pretty great!

CSS:
html {
background: url('imgs/sky.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

I used a general reset on this project and added a color to the links.

CSS:
* {
padding: 0;
border: 0;
outline: 0;
margin: 0;
}

a {
text-decoration: none;
color: #999999;
}

li {
list-style: none;
}

Now, to position the icons. First, I made the three icons positioned absolutely to the document. And since positioned absolute, I set them 45% from the top.

CSS:
.earth,
.heart,
.gift {
position: absolute;
top: 45%;

Next, I set each icon to be a percentage from the left.

CSS:
.earth {
left: 25%;
}

.heart {
left: 50%;
}

.gift {
left: 75%;
}

The icons are positioned just how I would like, now to format the icons when hovered.

CSS:
a:hover {
color: #2c2c2c;
}

I also went back to the link style and added a transition which it gives the hover a slower color change. Less snappy.

CSS:
a {
transition: .5s
}

And that will do it for now. See you next time.

Live code to play:
CodePen

References:
MDN