Jermaine Subia Jermaine Subia - 3 months ago 51
CSS Question

Invalid Property Value CSS in Rails

I am trying to achieve the following in the top section an image to show where the "breadcrumb" is. I have it highlighted in the image.

What I want to achieve see the highlighted section

The css for it is:

.breadcrumbs-v3.img-v3 {
background: url(../img/breadcrumbs/img3.jpg) no-repeat;
background-size: cover;
background-position: center center;
}


When I translate the css into rails acceptable format it looks like this:

.breadcrumbs-v3.img-v3 {
background: url(<%= asset_url 'creative/martin_images/img3.jpg' %>) no-repeat;
background-size: cover;
background-position: center center;
}


Instead of seeing the image I want to see I only see this with the following error message:


Invalid Property Value


See the console for the error message far right.

Error

In my stylesheets folder I am loading the css into my layouts which include the about.index.html where the code resides.

/*
*= require jquery-ui
*= require creative/bootstrap.min
*= require font-awesome
*= require creative/animate
*= require creative/animated-headline
*= require creative/custom
*= require creative/dark
*= require creative/default
*= require creative/footer-v1
*= require creative/header-v6
*= require creative/jquery.fancybox
*= require creative/line-icons
*= require creative/owl.carousel
*= require creative/parallax-slider
*= require creative/settings
*= require creative/style
*= require creative/app
*= require creative/blocks
*= require creative/page_log_reg_v1
*= require creative/page_about
*= require creative/jquery.mCustomScrollbar
*= require creative/sky-forms
*= require creative/custom-sky-forms

*= require_self
*/


Here is my layout view creatives.html.erb.

<!DOCTYPE html>
<html>
<head>
<title><%= yield(:page_title) %> | </title>
<%= stylesheet_link_tag 'creative/manifest.css', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'creative/manifest.js', 'data-turbolinks-track': 'reload' %>
<%= csrf_meta_tags %>
<!-- GOOGLE FONT -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Dosis:400,300,600,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600&amp;subset=cyrillic,latin'>

</head>

<body class="header-fixed-space-default">
<%= render 'layouts/navbar' %>

<%= yield %>
<%= render 'layouts/footer' %>

</body>
</html>


Could someone please help me figure out why I am not able to imitate the first picture?

Answer Source

You can't inlcude erb tags <%= %> in your stylesheet.

To correctly link an image in your css, you use:

.selector {
   background-image: url(/assets/image.png);
}

or

.selector {
   background-image: url("/assets/image.png");
}