Using .css files with Laravel

Question

I have issues using laravel with .html files and .css files. Maybe you can help me I have this snippet in index.blade.php

    <div class="container">

<div class="top">

    <div class="navigation">
        <a href="index.html">home</a>
        <a href="index.html">the journey</a>
        <a href="index.html">characters</a>
        <a href="index.html">image gallery</a>
        <a href="index.html">history</a>

    </div>

    <div class="pattern"><span></span></div>

    <div class="login">

        <div class="loginitem">

            <form action='login.php' method='post'>
            Username: <input type='text' name='username' /><br />
            Password: <input type='password' name='password' /><br />
            <input type='submit' value='Login' /><br><br>
            </form>

        </div>

        <div class="loginbutton">
            <i> Not </i> <a style="color: red;"  href="registration.html">registered </a> <i> yet? </i> 
        </div>
    </div>

    <div class="pattern"><span></span></div>


</div>

And this snippet from my index.css file

    .divider {
background: url(img/divider.gif) no-repeat;
height: 20px;
margin: 24px 0;
    }


    /* structure */

    .container {
background: url(img/bgcontainer.jpg) repeat-y center top;
margin: 0 auto;
width: 736px;
    }


    .top {
background: url(img/bgcontent.gif) no-repeat 0 -4%;
margin: 0 auto;
text-align: center;
width: 632px;
    }

    .login .loginitem{
     position: relative;
     padding-top: 85px;
    }

I have problem loading the image using these lines

     background: url(img/bgcontainer.jpg) repeat-y center top;
     background: url(img/divider.gif) no-repeat;

etc. from the style.css file

My images are in a folder called img in the Public folder where they belong. Only the positioning of my divs work. I need some help because i don't know how to load the pictures from the .css file using laravel. Thanks in advance.

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   <html>

    <head>
{{ HTML::style('css/index.css'); }}
     <link href='http://fonts.googleapis.com/css?family=Alegreya+SC:400,400italic'            rel='stylesheet' type='text/css'>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <meta name="description" content="description"/>
      <meta name="keywords" content="keywords"/> 
    <meta name="author" content="author"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Caught in the Middle</title>
     </head>

This is how I load my .css file

What sort of folder structure are you using, `img/image-name.jpg` will be relative to where the `.css` file is located — Nick R, Feb 17 '14 at 14:00
We need to know the folder structure, do you have a `css` folder? — Nick R, Feb 17 '14 at 14:32
Yes. The folder structure is Laravel/Public/css/style.css and my pictures are in Laravel/Public/img/bg.jpg (just as an example). The .css file works. The background : url('') line of code are not working. — Serban Spirescu, Feb 17 '14 at 14:39
check with crome inspector(or whichever browser you prefer) what the path is of the css file it is trying to load. If it is not working you should see an error like `GET http://domain.com/css/index.css 404 (Not Found)` if you check the chrome console. This should be a clue towards changing to the correct path — g_uint, Jan 21 '15 at 14:02

score 1 · Answer 1 · edited May 23 '17 at 12:03

If your folder structure is

Laravel/Public/css/style.css

and your picture are in the same level of your css folder:

Laravel/Public/img/bg.jpg

and css images are relative to the .css file, then you probably should get down one level to enter the image folder:

background: url('../img/bgcontent.gif') no-repeat 0 -4%;

Here's another answer for this: Is a relative path in a CSS file relative to the CSS file?.

EDIT

Don't forget that all files in your '/public' folder are not really controlled by Laravel. This is a folder purely controller by your webserver, which passes some control to PHP and Laravel. So when you hit on your browser the file:

http:://laravelapplication.com/img/bgcontent.gif

This is resolved not by Laravel, but by your webserver (apache? nginx?). And this is what happens with all assets files (css, js, png, jpg, gif) files you have there.

Sometimes it might be confusing because Laravel generates URLs, but when those URLs becomes HTML, Laravel has nothing to do with them if they are pointed to real files in your /public folder.

How do you know that they are pointed to public: the file must exist. If it doesn't exists, your webserver will pass it to public/index.php and then, yes, this it will be processed by Laravel.

How do you make sure this is a Laravel or HTML/CSS/Webserver thing? Get the full URL of a file a put it in your browser address:

http:://laravelapplication.com/img/bgcontent.gif

If your browser shows that image, it's not Laravel working, just your webserver.

Unless, of course, you have smart routes doing the work for you, but this is a more advanced Laravel routing matter and I don't think it's the case here.

this __should__ work. are you sure that you are not mistyping the files name? — itachi, Feb 17 '14 at 15:18
Remember I am using laravel framework. This is a website I am rebuilding using Laravel. Formerly I built the site using pure php, html and css. It worked perfectly. This issue is regarding the views and templating engine of Laravel — Serban Spirescu, Feb 17 '14 at 15:42
Yeah, not really, this might be confusing sometimes, so I just made an edit to clarify. — Antonio Carlos Ribeiro, Feb 17 '14 at 15:50

score 0 · Answer 2 · answered Feb 17 '14 at 14:08

0

Try to append slash in front of img path, like this:

background: url(/img/bgcontainer.jpg) repeat-y center top;

answered Feb 17 '14 at 14:08

Miroslav Trninic

3,327
4
28
51

score 0 · Answer 3 · answered Feb 17 '14 at 15:07

0

url() function is used with respect to yor css file, not HTML file. So if your css is in public/css/style.css and your images are in public/img/one.jpg then use url(../img/one.jpg);

answered Feb 17 '14 at 15:07

Abhinandan N.M.

362
1
3
15

This is what I am doing. The url() function is written in my .css file not in blade.php – Serban Spirescu Feb 17 '14 at 15:11

Using .css files with Laravel

3 Answers3