Background Images
Transcript: Placing a background image requires more than just using the background-image property. There are other properties that you will need to familiarize yourself with in order to successfully place your image on your web page. These background CSS properties include: background-color Sets the background color of an element. background-image Sets the background image for an element. background-repeat Sets how a background image will be repeated. background-attachment Sets whether a background image is fixed or scrolls with the rest of the page. background-position Sets the starting position of a background image. See the examples on the next slides. Background Images Let's put it all the properties together. body{ background-color: #333; background-image: url(../image/mountain.png); background-repeat: no-repeat; background-attachment: fixed; background-position: top left; } According to w3schools.org the order of the properties matter. You don't need each of the properties or in other words one or more of the items can be missing. However, it should maintain the same order. To help me remember, I think of pancakes. Because pancakes need syrup. In this case, the background order needs CIRAP. Color, Image, Repeat, Attachment and Position. When adding a background image to your website, it is important to understand what file types work the best to improve your download speed. Example of file types for background images: .png .jpg .gif Tip - In order to change a photo file type like a .jpg, .pdf or .eps file to a .png file on a Mac, open the file in Preview. Then on the file menu and choose export. Near the bottom of the menu click format and select .png and then click on save. It's that easy. Background Properties Adding a Background Image http://www.w3schools.com/cssref/pr_background-image.asp The background-image property sets one or more background images for an element. The background of an element is the total size of the element, including padding and border (but not the margin). By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. Background Fixed Image Despite your decision to use a background image, it's still recommended that you use a background color as a default. body{ background-color: #333; background-image: url(../image/mountain.png); background-repeat: no-repeat; } The reasoning behind the additional use of background color, is in case the browser does not load for your user. That said, make sure you choose your default color wisely. You don't want a neon color to blow your user experience away and distract them from your content or product. (unless you want to bring back the 80's to your site) A background image added to a website with no content. body{ background-image: url(../image/mountain.png); background-repeat: no-repeat; } Background Image Color Background Image Repeat Background Images Conclusion Background Images Background Image File Types When the background is fixed, the text on your page scrolls while the background does not move. The last item I want to discuss is background positioning. This property will set the starting position of the background image. For example, the standard starting position is the top left of a website here in the U.S. because our language is read from left to right. In countries that read from right to left a positioning that would work best would be top right. body{ background-image: url(../image/mountain.png); background-repeat: no-repeat; background-attachment: fixed; background-position: top left; } Background Image Positioning Putting It All Together body{ background-image: url(../image/mountain.png); background-repeat: repeat; } Background Images are an impactful aspect or your web page design. Learning how to apply a background-color as a default and placing and background-image within your body div in your CSS file are the first two key steps. Depending on what type of image you have will then help you to decide whether or not you will need to utilize the other background properties. The additional properties are background-repeat, background-attachment and background-position. Lastly, remember when dealing with background properties, don't forget to pass the CIRAP. In order to add a background image to your site, you need to apply the background-image property to your <body> tag in your CSS file. Example code: body{ background-image: url(../image/mountain.png); } The url destination is mapped to the location of the file image through the direct path in the folder structure. The majority of websites use some form of a background image to enhance their user experience. Some sites choose to use simple backgrounds like apple.com. Other sites like msn.com use only a color for their background, leveraging white space to to highlight their content. body{ background-image: url(../image/mountain.png); background-repeat: no-repeat; background-attachment: fixed; } Background Image No