To add a bit of subtle imagery to your webpages, learn how to add a background image.
- [Instructor] Sometimes you want to put…a graphic element in the background of your page…to subtly emphasize the point being made in the text.…I started creating a page for a fictional travel agency.…At the left is the mark up…and on the right is what you see in the browser.…This looks okay…but I want to add a background image.…Here's the image I'm going to use…for the background of the page.…Let's go over to the mark up…and add it using CSS.…At the top in the Style section of the Body element…between lines seven and nine,…I'm going to add the background-image property…which has a URL of images/travel-globe.png.…
I'll save that…and when I reload in the browser,…let's see what that looks like…and there's the background image.…When you specify a background image,…it tiles the background…repeating horizontally and vertically…to fill the browser window.…As you can see, this image is far from being subtle.…It's drowning out the text.…Let's fix this.…I've already prepared a lighter colored version…of the image by adjusting its transparency…
AuthorJ. David Eisenberg
- Using the img element
- Resizing images
- Obtaining images for your website
- Image formats and when to use them
- Styling images with CSS
- Adjusting borders, margins, and padding
- Adding background images
- Testing screen resolutions
- Autonumbering figures with CSS
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
1. Image Essentials
2. Image Formats
3. Images and CSS
4. Responsive Images
Next steps1m 19s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.