HTML and CSS Reference
In-Depth Information
input.full-width {
width: 100%;
}
form#add-movie {
margin-left: 80px;
}
input.search {
padding-left: 30px;
background: url('../img/search.png') 5px 50% no-repeat transparent;
background-size: auto 50%;
border: none;
border-bottom: 1px solid #BF2628;
color: #FFFFFF;
font-size: 1.5em;
}
input.search::-webkit-input-placeholder, input.search::-moz-placeholder {
color: rgba(255, 255, 255, 0.5);
}
input.search.loading {
background-image: url('../img/loading.gif');
}
Save and close your file. Finally, you will need to open the _highres.scss file.
This file will simply be used to replace any graphics for high resoloution displays
so that they appear crisp. Add the following code to the file.
header#taskbar {
h1.branding {
background-image: url('../img/highres/momemo.png');
background-size: 73px 32px;
}
}
As you can see, background-size needs to be used here as CSS will still use the
images full size when used as a background image despite the highres file being
double the resoloution of the low resoloution image. This will ensure that the
background image is scalled down to the correct pixel size. The difference
between not using this and using it can be shown below in Figure 6-3.
