bachna bachna - 1 year ago 172
Twig Question

Symfony + Twig + Semantic UI = Background image doesn't show up

could anyone please help me with understanding what is going wrong in my code? I use Symfony 2.8, Semantic UI and Twig and trying to simply put a picture in background of my site. I'm modifying my base.html.twig file to do that.

I tried to:


  1. use different pictures in different formats and sizes

  2. place picture in different locations:


    • in app/Resources/views

    • in src/AppBundle/Resources/public/images

    • in web/semantic - that's where I keep Semantic UI files


  3. use different ways of setting up:


    • as body tag attribute

    • as inline style placed in body tag

    • as internal style used in div tag

    • as external style - I modified Semantic UI css




I checked if it's not a problem with path name with sereval experiment's. It's not. What's important: when I tried to simply set background color, each time it worked well. Only pictures does't show up.

Any suggestions how to solve that problem?

This is my base.html.twig file:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %} Address Book {% endblock %}</title>
{% block stylesheets %}
<link href="{{ asset('/semantic/semantic.css') }}" rel="stylesheet"/>
{% endblock %}
{% block javascripts %}
<script src="{{ asset('/semantic/semantic.js') }}"></script>
{% endblock %}
</head>
<body style="background-image:url(siano.jpg)">
<div class="ui center aligned container">
<div class="ui grid">
<div class="four wide column"></div>
<div class="eight wide column">
<p>
<h1> Address Book </h1><br>
</p>
{% block body %}{% endblock %}
</div>
<div class="four wide column"></div>
</div>
</div>
</body>




In situation above files structure is:

AppBundle
Resources
views
base.html.twig
siano.jpg

Answer Source

Try this:

Move your image to web/images.

And then:

<body style="background-image:url('{{ asset('images/siano.jpg') }}')">
<div class="ui center aligned container">
    <div class="ui grid">
        <div class="four wide column"></div>
        <div class="eight wide column">
            <p>
                <h1> Address Book </h1><br>
            </p>
            {% block body %}{% endblock %}
        </div>
        <div class="four wide column"></div>
    </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download