Superimposing text over an image using a combination of relative and absolute positioning is a useful technique. In this video, learn how to position the page heading over the hero image and make it responsive, which is done by changing the font size and position at different breakpoints by adding media queries.
- [Instructor] Placing text over an image is fairly simple…using a combination of relative and absolute positioning,…but with a responsive site…the size and position of the text…also needs to react to the size of the viewport.…I want the site's main heading…to go over this stretch of water…at the bottom left of the hero image.…So select the image in Live view,…the element display confirms…that the image has been selected,…so go to the Insert menu, Heading, and then select H1.…
Position assist dialog wants to know where it needs to go.…It needs to be before the image,…so I'll click Before and that inserts the level one heading…with some placeholder text.…Double-click to enter edit mode…and replace that placeholder with Yosemite…and then click away to exit edit mode.…To move the text over the image we need to set…its parent element's position property to relative.…
And if we look at the tag selected down at the bottom…the h1 is currently selected…and its parent element is this div with the id of hero.…So in the CSS Designer make sure…
- Defining a layout grid
- Inserting and modifying a navigation bar
- Adding a container for the page content
- Inserting a responsive image
- Resizing and duplicating columns
- Inserting fixed-size images
- Inserting cards
- Editing a carousel
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
Bootstrap 4 Essential Trainingwith Ray Villalobos6h 46m Beginner
Bootstrap 4 Layouts: Responsive Single-Page Designwith Ray Villalobos3h 13m Intermediate
Designing Websites from Photoshop to Dreamweaverwith Sue Jenkins2h 27m Intermediate
What you should know1m 46s
1. Get Started
2. Create the Site Navigation
3. Add a Hero Image
4. Work with Rows and Columns
5. Edit Bootstrap Components
6. Complete the Design
Next steps1m 55s
- 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.