CSS & Background Images

Edit on GitHub

When we're talking about the frontend of a site, we're mostly talking about two things, CSS and JavaScript. Let's start with the CSS side of things... which is dead simple with AssetMapper. You create a CSS file inside the assets/ directory then include it with a good old-fashioned link tag that uses the file's logical path. That's it. Zero magic.

This is a bit different than Encore. With a build system like Encore, you may be familiar with doing things like this: import './styles/app.css. That kind of thing will not work in a browser environment. Import statement are for importing JavaScript files, period. Ok, you can technically lazily-load CSS like this, but that's an edge-case we don't need to worry about right now.

The point is, you can't import CSS files from JavaScript files and that's ok: adding a link tag works great.

Referencing Images from inside CSS Files

Ok: so we know that we can refer to any file in the assets/ directory using the asset() function... which we've now done twice.

But what if we need to refer to a file - like this image - from inside a CSS file?

            
            72 lines
            
            templates/base.html.twig
        
                                                    ... lines 1 - 20
                            
                <body class="bg-gray-800 text-white">
        
                                                    ... lines 22 - 49
                            
                    <img src="{{ asset('images/penguin.png') }}">
        
                                                    ... lines 51 - 69
                            
                </body>
        
                                                    ... lines 71 - 72

Check it out. Up here, we have a little record icon in the upper-left corner. Change that to be a span with class="bg-logo" so we can include our penguin image instead. Copy that bg-logo class head to app.css, add .bg-logo and... I'll add some basic styles.

            
            72 lines
            
            templates/base.html.twig
        
                                                    ... lines 1 - 20
                            
                <body class="bg-gray-800 text-white">
        
                                                    ... lines 22 - 25
                            
                                <a href="{{ path('app_homepage') }}" class="flex">
        
                                    <span class="bg-logo"></span>
        
                                                    ... line 28
                            
                                </a>
        
                                                    ... lines 30 - 69
                            
                </body>
        
                                                    ... lines 71 - 72

The big question is: how can we set the background image... since the final penguin.png will have a versioned filename? The answer is: exactly how you would normally do it: url() and then the relative path to the file: ../images/penguin.png.

            
            12 lines
            
            assets/styles/app.css
        
                                                    ... lines 1 - 3
                            
            .bg-logo {
        
                display: inline-block;
        
                width: 32px;
        
                height: 32px;
        
                background-image: url('../images/penguin.png');
        
                background-size: contain;
        
                background-repeat: no-repeat;
        
            }

This is exactly how you do it in Encore and exactly how you would do it if these files were being served directly to our browser. We simply need to write "correct" code and it'll work.

Let's add 2 more styles for the background... then testing time! Refresh and... yes, it does work! Inspect that image... then look at the final CSS file. Let's open this in a new tab.

Perfect! For the most part, the final files exactly match the source files. No magic. However, in this case, AssetMapper did make one small change. In the original file, we referred to ../images/penguin.png. But over here we have ../images/penguin-versionhash.png. Yup, AssetMapper made that tiny change to keep things working, despite the versioned filenames.

The point is: you get to code like normal... and everything just works.

Next: let's invite some third-party CSS like Bootstrap and fonts... to the party!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.1",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "^4.0", // v4.2.0
        "doctrine/doctrine-bundle": "^2.7", // 2.10.0
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.2.4
        "doctrine/orm": "^2.12", // 2.15.2
        "knplabs/knp-time-bundle": "^1.18", // v1.20.0
        "pagerfanta/doctrine-orm-adapter": "^4.0", // v4.1.0
        "pagerfanta/twig": "^4.0", // v4.1.0
        "stof/doctrine-extensions-bundle": "^1.7", // v1.7.1
        "symfony/asset": "6.3.*", // v6.3.0
        "symfony/asset-mapper": "6.3.*", // v6.3.0
        "symfony/console": "6.3.*", // v6.3.0
        "symfony/dotenv": "6.3.*", // v6.3.0
        "symfony/flex": "^2", // v2.3.1
        "symfony/framework-bundle": "6.3.*", // v6.3.0
        "symfony/http-client": "6.3.*", // v6.3.0
        "symfony/monolog-bundle": "^3.0", // v3.8.0
        "symfony/proxy-manager-bridge": "6.3.*", // v6.3.0
        "symfony/runtime": "6.3.*", // v6.3.0
        "symfony/stimulus-bundle": "^2.9", // v2.9.1
        "symfony/twig-bundle": "6.3.*", // v6.3.0
        "symfony/ux-turbo": "^2.9", // v2.9.1
        "symfony/web-link": "6.3.*", // v6.3.0
        "symfony/yaml": "6.3.*", // v6.3.0
        "twig/extra-bundle": "^2.12|^3.0", // v3.6.1
        "twig/twig": "^2.12|^3.0" // v3.6.1
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.4
        "symfony/debug-bundle": "6.3.*", // v6.3.0
        "symfony/maker-bundle": "^1.41", // v1.49.0
        "symfony/stopwatch": "6.3.*", // v6.3.0
        "symfony/web-profiler-bundle": "6.3.*", // v6.3.0
        "zenstruck/foundry": "^1.21" // v1.33.0
    }
}

Edit on GitHub

TRACK

Symfony 6 >

COURSE

AssetMapper: Modern JS with Zero Build System

CSS & Background Images

Video not working?

Referencing Images from inside CSS Files

Leave a comment!

What PHP libraries does this tutorial use?

	... lines 1 - 20
	<body class="bg-gray-800 text-white">
	... lines 22 - 49
	<img src="{{ asset('images/penguin.png') }}">
	... lines 51 - 69
	</body>
	... lines 71 - 72

	... lines 1 - 20
	<body class="bg-gray-800 text-white">
	... lines 22 - 25
	<a href="{{ path('app_homepage') }}" class="flex">
	<span class="bg-logo"></span>
	... line 28
	</a>
	... lines 30 - 69
	</body>
	... lines 71 - 72

	... lines 1 - 3
	.bg-logo {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-image: url('../images/penguin.png');
	background-size: contain;
	background-repeat: no-repeat;
	}