Join David Powers for an in-depth discussion in this video Adding a background image to the brand, part of Dreamweaver CC 2015: Responsive Design with Bootstrap.
- The re-styled navbar looks much better,…but I think you could do with some visual interests…around the brand.…That's this Yosemite, here, this text.…So, select the brand.…It's selected the navbar brand.…That's exactly what we want.…So, in the CSS designer we need to make sure that…Yosemite.css is selected.…Then, in the @Media pane we need to select GLOBAL…because we want to apply this outside the media queries.…So, we'll apply to all resolutions.…
Then, we need a new selector.…So, click the + button in the Selectors pane.…Dreamweaver suggests a selector based on the context.…It's a bit too specific.…So, if you press the up arrow a couple of times,…we're left with the navbar-brand class…which is exactly what we want.…Then, press Enter or Return to confirm that.…If this Show Set checkbox is selected,…deselect that so we can use the visual tools.…
It's the background that we want to change.…So, that's the fourth icon at the top.…Select that and then Background Image alongside URL…we need to select for that.…We need to go to the images folder,…
- Defining a custom Bootstrap layout grid
- Inserting and modifying a navigation bar
- Adding a container for a hero image
- Working with columns inside a Bootstrap container
- Creating placeholder content with Emmet
- Speeding up layout by duplicating columns
- Moving page elements in the DOM
- Previewing the mobile webpage with Device Preview
Skill Level Intermediate
1. Getting Started
2. Creating the Site Navigation
3. Adding a Hero Image
Inserting the hero image6m 37s
4. Working with Columns
5. Using Device Preview
What next?2m 5s
- 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.