Reputation: 139

Using .css files with Laravel

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

Upvotes: 0

Answers (3)

Antonio Carlos Ribeiro

Reputation: 87719

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.

Upvotes: 1

Abhinandan N.M.

Reputation: 372

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);

Upvotes: 0

Miroslav Trninic

Reputation: 3455

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

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

Upvotes: 0

Using .css files with Laravel

Answers (3)

Related Questions