Bdtjtk

I'm new to rails and stack over flow, I would be grateful to you all if I can guided here.

I'm developing a test site which is like a personal blog just to add portfolio for one user.

I have a scaffold "Dashboard" which is used to update homepage information of the website such as Titles, Banners, About Me etc.

All text of from the database is coming on the homepage perfectly fine.

However, banner images are not coming appropriately as per the theme style.

My problem - When the banner is added the text above the banner gets hidden.

Below is my code for your kind reference, I'm sure I'm making some mistake in this line

<div class="swiper-slide cover-background" style="background-image:url('<%= image_tag dashboard.banner1.url %>');">

However, unable to rectify it yet.

Original line of code:

<div class="swiper-slide cover-background" style="background-image:url('http://placehold.it/1920x1080');">

any help or suggestion would be great.

Complete Code for reference

<% @dashboards.order('created_at ASC').limit(1).each do |dashboard| %>

<section class="no-padding main-slider height-100 mobile-height wow fadeIn">

    <div class="swiper-full-screen swiper-container height-100 width-100 white-move">

        <div class="swiper-wrapper">

            <!-- start slider item -->

            <div class="swiper-slide cover-background" style="background-image:url('<%= image_tag dashboard.banner1.url %>');">

                <div class="opacity-extra-medium bg-black"></div>

                <div class="container position-relative full-screen">

                    <div class="slider-typography text-center">

                        <div class="slider-text-middle-main">

                            <div class="slider-text-middle">

                                <div class="alt-font text-white text-uppercase font-weight-700 letter-spacing-minus-3 title-extra-large margin-two-bottom width-60 center-col md-width-80 sm-margin-four-bottom xs-width-90 xs-margin-25px-bottom xs-letter-spacing-0"><%= dashboard.name %></div>

                                <div class="btn-dual">

                                    <a href="about-us-modern.html" class="btn btn-transparent-white btn-small xs-margin-two-all">About Company</a>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <!-- end slider item -->

<% end %>

Using the image_tag helper will generate and return a complete a HTML tag like <a src="foo/bar.jpg" /> not just the URL which you need in your example.

Just change this line

<div class="swiper-slide cover-background" style="background-image:url('<%= image_tag dashboard.banner1.url %>');">

to

<div class="swiper-slide cover-background" style="background-image:url('<%= dashboard.banner1.url %>');">