From the course: Dreamweaver CC: Responsive Design with Bootstrap 4
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Position text over the image - Dreamweaver Tutorial
From the course: Dreamweaver CC: Responsive Design with Bootstrap 4
Position text over the image
- [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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.