CSS Images, Images, and Fonts in Laravel 4 Framework - css

Question

I am having some trouble with a few things with the Laravel 4 Framework. First, to give the setup, I have an assets folder, within my public folder, that contains a folder for css called "CSS", a folder for images called "images", and a folder for fonts called "webfonts". Here are the paths:
/laravel-master/public/assets/CSS
/laravel-master/public/assets/images
/laravel-master/public/assets/webfonts
Inside the CSS folder is my main CSS file, style.css. I am trying to use an image as a background that I call within this CSS file. Here is the code:
.banner-image{
background: transparent url('../assets/images/8662834823_575a23516d_o.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
height: 800px;
min-width: 1200px;
}
I have also tried:
.banner-image {
background: url('assets/images/8662834823_575a23516d_o.jpg');
}
and:
.banner-image {
background: url('/assets/images/8662834823_575a23516d_o.jpg');
}
Within my view, I call this CSS with the div:
<div class="banner-image"></div>
Both of these result in the page remaining blank. The image is not showing up, and I am not sure why.
On to the next one. Without using CSS, I am just trying to have a simple image show up. I have tried:
<img src="{{asset('assets/images/fanssignupsplash.png')}}">
and:
{{HTML::image('images/fanssignupsplash.png')}}
and:
{{HTML::image('assets/images/fanssignupsplash.png')}}
All of these result in the broken image symbol. The image is not showing up.
Finally, in CSS again, I am trying to use fonts files that I have put in the webfonts folder mentioned above. However, again the font is not working. I know the CSS file is being uploaded correctly to the page, because the color changes on the text, but the font is not being applied. Here is the CSS:
#font-face {
font-family:'proxima-nova';
src:url('/assets/webfonts/proximanova-bold-webfont.eot');
src:url('/assets/webfonts/proximanova-bold-webfont.eot?#iefix') format("embedded-opentype"),url('/assets/webfonts/proximanova-bold-webfont.woff') format("woff"),url('/assets/webfonts/proximanova-bold-webfont.ttf') format("truetype"),url('/assets/webfonts/proximanova-bold-webfont.svg#ProximaNovaBold') format("svg");
font-weight:bold;
font-style:normal
}
The view I am using is a blade file (landing.blade.php). This is all on localhost, using MAMP.
Thank you very much for your help with all of this. I am new to Laravel, and I have gotten all of this to work outside of a framework on a live site. Your help is very much appreciated.

Answer 1

I stopped on your first question, first tried solution.
Shouldn't it be this :
.banner-image{
background: transparent url('../images/8662834823_575a23516d_o.jpg') no-repeat center center;
...
}
See the removed "/assets"
Because if I got it well, your arborescence is like this:
assets
CSS
style.css
images
8662834823_575a23516d_o.jpg
For your second question, try to add a / at the beginning of your URL :
{{HTML::image('/assets/images/fanssignupsplash.png')}}
since I believe assets is at the root of your server.

Answer 2

add font face in a main.blade.php:
<style>
<?php $url = asset('plugins/font/Roboto-Regular.tff') ?>
#font-face {
font-family: Roboto;
src: {{$url}};
}
</style>
you can write also:
<style>
#font-face {
font-family: Roboto;
src: {{asset('plugins/font/Roboto-Regular.tff')}};
}
</style>
then in your scss or css use:
body{
font-family: Roboto;
}
https://laravel.com/docs/4.2/helpers#urls
then you don´t have problems when public your app