0

I'm fairly new to development and have been focusing a lot of time on a web project in Ruby on Rails. I'm having some problems with my application.css file.

As I understand it, this file will be used to apply the basic layout to all my views. So, I would like to add my website logo to the top left of the page.I currently have the image stored in my public folder while my application.css file is located in /app/assets/stylesheets folder. I've tried numerous ways to get this to work with no success.

Here's what I have in the .css file:

body {
    background-color: #000000;
    background-image: url("../public/tpllogo.png");
    background-repeat: no-repeat;
    background-position: left top;
    font-family: 'Courier New', courier, monospace;
 }

All other changes I have made to this css test fine (with some minor issues of updating after changes).

cimmanon
  • 67,211
  • 17
  • 165
  • 171
Misanthropos
  • 9
  • 2

2 Answers2

1

just change background-image: url("../public/tpllogo.png"); to
background-image: image-url('tpllogo.png');

Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39
  • So you agree that this should be closed as a duplicate of the question this was marked a duplicate of? (hint: duplicates should not be answered) – cimmanon May 02 '15 at 17:14
-1

In order to do this, the easiest way is with Bootstrap.

First add this line to /app/assets/javascripts/applications.js exactly as follows

//= require bootstrap

If the Bootstrap Sass gem is not included: Add the following line to your Gemfile -

gem 'bootstrap-sass', '~>3.0.3.0'

Once you've done that add the following line to (if the file doesnt exist, create it) - /assets/stylesheets/custom.css.scss 

@import "bootstrap";

Now that you're all set up you can add a nav bar, that will keep your logo where you want it view this example from the bootstrap docs: http://getbootstrap.com/components/#navbar

The important part for your logo is this line:

<a class="navbar-brand" href="#">Brand</a>
Zack Weiner
  • 664
  • 4
  • 14
  • What does this have to do with the question being asked? – cimmanon May 02 '15 at 17:15
  • logo placement, css, sass, compilation & pre-compilation. – Zack Weiner May 02 '15 at 17:19
  • You get that the problem is the background image isn't loading, right? How is adding Bootstrap going to solve that? – cimmanon May 02 '15 at 17:20
  • No, I read it as a css placement issue. At no point did @Misanthropos say the image wasnt loading. – Zack Weiner May 02 '15 at 17:23
  • Even if that is true, adding Bootstrap is an overkill for something that barely takes more than 3 lines of CSS. (related: http://meta.stackexchange.com/questions/45176/when-is-use-jquery-not-a-valid-answer-to-a-javascript-question) – cimmanon May 02 '15 at 17:27
  • Well thats most certainly an opinion. This person explains their a noob so we shouldn't be accepting their {background-position: left top;} as a good way to place the logo on a website. SO community is supposed to be about helping, explaining, & learning. – Zack Weiner May 02 '15 at 18:20