Improve Course Page and Add Dynamic Background Image in Rails

Notes


In this lesson we want to start making the course page much more presentable.

The key here is using our image as a background image in the header.  There are two things we need to do to get this done.  First let's update the home.css file with a new class called hero-image:

.hero-image {
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  color: #ffffff !important;
}

This will allow us to use a dynamic background image in the view.  In the app/views/courses/show.html.erb file we can now use this CSS class as well as place our image property in the background as an inline style:

<div class="jumbotron jumbotron-fluid text-center hero-image d-flex align-items-center"
     style="background-image: url('<%= url_for(@course.image) %>');">
  <div class="container">
    <h1 class="display-4"><%= @course.title %></h1>
  </div>
</div>

Now our course page is starting to look quite a bit better... check it here:

Course show view with a background image


To legit.  We make a few other changes to this page in this lesson that you can see in the video.  But the key to this is given us a nice looking and relevant image (you do get the image connection right??) as our background.

Feel free to make your own tweaks with images, background gradients or even SVGs!!

Happy coding, uh er designing!!