1

I'm trying to do a simple background image on a page in my SlimPHP web app.

In my CSS file (which is loaded fine) I have:

.image1 {
  background-color: transparent; 
  background: url("image1.jpg");
}

and my structure is:

-- project
  -- app
  -- routes
  -- templates
  -- www
    -- css
      -- stylesheet.css
      -- image1.jpg
    -- js
    -- i
      -- image1.jpg

In the network tab I get 403 Forbidden because slim is trying to access it as a page.

I have tried a few variations such as background-image, "../i/image1.jpg", but always get the same issues.

I can't find any other questions anywhere like this so there must be something simple I am missing!

I know SlimPHP fairly well but do not have much experience in CSS so any help would be appreciated!

Thanks

Additional:

Example of page request:

$app = new \Slim\Slim(array(
    'templates.path' => '../templates',
));
$app->container->singleton('log', function () {
    $log = new \Monolog\Logger('slim-skeleton');
    $log->pushHandler(new \Monolog\Handler\StreamHandler('../logs/app.log', \Monolog\Logger::DEBUG));
    return $log;
});
$app->view(new \Slim\Views\Twig());
$app->view->parserOptions = array(
    'charset' => 'utf-8',
    'cache' => realpath('../templates/cache'),
    'auto_reload' => true,
    'strict_variables' => false,
    'autoescape' => true
);
$app->view->parserExtensions = array(new \Slim\Views\TwigExtension());

// Twig
$loader = new Twig_Loader_Filesystem(dirname(dirname(__FILE__)) . '/templates');
$twig = new Twig_Environment($loader);


/**
 * Default home page
 */
$app->get('/', function() use ($app) {
    $app->redirect('/home');
});

/**
 * Index page
 */
$app->get('/home', function() use ($app, $twig) {
    $params['page_title'] = 'home';
    $template = $twig->loadTemplate('routes/index.html.twig');
    $template->display($params);
});
Kimberley
  • 11
  • 3
  • Unless this is a "permissions" problem with your directory files... it might be helpful if we could have you post a little more code from your project _(for example: code that has to do with requesting a page and responding to a page request)_. – summea Jun 24 '15 at 21:30
  • Did you try with `./i/image1.jpg`? – Davide Pastore Jun 25 '15 at 19:34
  • 1
    @summea I'm not sure if that's what you meant but I've add a couple example routes, including showing the use of twig. – Kimberley Jun 25 '15 at 20:15
  • @DavidePastore Yep I've tried that – Kimberley Jun 25 '15 at 20:15
  • Thanks for posting those routes! Could we also have you post at least the header section of the place where your `$twig` variable is defined? – summea Jun 25 '15 at 21:34
  • The PHP is largely irrelevant, except to the extent that it decides what's in the page. The PHP execution has finished by the time the "page", or more precisely, the stream of `content-type text/html` is sent to the browser. A browser "view page source" should show a link to your _stylesheet.css_ that that refers to _"image1.jpg"_. One important thing to note is that the image location is relative to the _stylesheet_, not relative to the "page" or URL. See SO question [Using relative URL in CSS file, what location is it relative to?](http://stackoverflow.com/q/940451/17300) – Stephen P Jun 27 '15 at 00:36
  • Thanks everyone - turns out it was a permissions issue - thought I'd already checked that! @summea If you add that as an answer I'll accept it. – Kimberley Jun 28 '15 at 11:11

0 Answers0