Jermaine Subia Jermaine Subia -3 years ago 317
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.


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>
<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=',300,600,700' rel='stylesheet' type='text/css'>
<link href=',300,600,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' type='text/css' href='//,300,600&amp;subset=cyrillic,latin'>


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

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


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);


.selector {
   background-image: url("/assets/image.png");
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download