CSS Images, Images, and Fonts in Laravel 4 Framework

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

Method 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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x