CSS element: background image

thankfulThankful is a wedding registry website that allows couples to personalize their own wedding registries. I’m not currently in a place in my life where I need to make a wedding registry, but I love its simple design. The large image draws users into the website and the thin, sans-serif font keeps it feeling simple.

This effect was achieved simply through adding a background image. Here is how to do it:

HTML:

<header role=”banner”>

<div class=”container” role=”navigation”>

<a href=”#” class=”nav-toggle”>

<i class=”ss-icon ss-standard”> </a>
<a class=”brand selected” href=”/”>
<img alt=”Thankful Logo” src=”//d3krjgdh5n3zsi.cloudfront.net/assets/logo-white-2x-2c7b0e88f4b861599dffed4bf30dc154.png”> Thankful </a>
<ul class=”nav-links”>
<li><a href=”/find-a-registry”>find a registry</a></li>
<li><a href=”/sign-up” class=”sign-up”>sign up</a></li>
<li><a href=”/accounts/sign-in” class=”sign-in”>sign in</a></li> </ul> </div

</header>

CSS:

element.style {

background-image:url(https://d2rdrr51ez8te0.cloudfront.net/hero-posters/fields.jpg);

}

Advertisements

2 responses to “CSS element: background image

  1. I really like the CSS of this site too- the background photo looks really good and simple!

  2. Kaylie Denenberg

    I really like the use of background images on this site as well. They picked elegant photos that capture what love looks like, which is perfect for the wedding registry site. I like that it’s a characteristic carried through the design.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s