Header image
No room listing would be complete without a big, glossy image to show it off. We've got a header image in our mock listing that we'll now include. Add this markup to the page.
index.html
:
<div id="app"> <div class="header"> <div class="header-img"></div> </div> <div class="container">...</div> </div>
And this to the CSS file.
style.css
:
.header { height: 320px; } .header .header-img { background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; background-color: #f5f5f5; height: 100%; }
You may be wondering why we're using a div
rather than an img
tag. To help with positioning, we're going to set our image as the background of the div
with the header-img
class.
Style binding
To set a background image, we must provide the URL as a property in a CSS rule like this:
.header .header-img { background-image: url(...); }
Obviously, our header image should be specific to each individual listing, so...