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
– Nick R, Commented Feb 17, 2014 at 14:00
We need to know the folder structure, do you have a css folder? — Nick R
– Nick R, Commented Feb 17, 2014 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
– Serban Spirescu, Commented Feb 17, 2014 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
– g_uint, Commented Jan 21, 2015 at 14:02

Community · Accepted Answer · 2017-05-23 12:03:40Z

1

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.

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Feb 17, 2014 at 14:43

Antonio Carlos Ribeiro

87.9k22 gold badges220 silver badges205 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

itachi Over a year ago

this should work. are you sure that you are not mistyping the files name?

Serban Spirescu Over a year ago

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

Antonio Carlos Ribeiro Over a year ago

Yeah, not really, this might be confusing sometimes, so I just made an edit to clarify.

Miroslav Trninic · Accepted Answer · 2014-02-17 14:08:10Z

0

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

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

answered Feb 17, 2014 at 14:08

Miroslav Trninic

3,4714 gold badges32 silver badges55 bronze badges

Comments

Abhinandan N.M. · Accepted Answer · 2014-02-17 15:07:04Z

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, 2014 at 15:07

Abhinandan N.M.

3721 gold badge3 silver badges15 bronze badges

1 Comment

Serban Spirescu Over a year ago

This is what I am doing. The url() function is written in my .css file not in blade.php

Collectives™ on Stack Overflow

Using .css files with Laravel

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related