1

I have extended Magento blank theme and placed _theme.less in css/source folder of my theme.

I want to add background image. So I added this code in _theme.less.

@page__background-image:"url('@{baseDir}images/index.jpg')";
@sidebar__background-color: @color-gray40;

My image is in web/images folder. Sidebar color changes but background image does not appear.

What can be issue?

2

Just add style in _module.less file of given path below:

app/design/frontend/vendor/theme/Magento_theme/css/source

body {
    .lib-css(background-image, @page__background-image);
}

you need to deploy static-content after add image

- php bin/magento cache:clean
- php bin/magento setup:static-content:deploy
| improve this answer | |
0

It should work with: background: url('../images/index.jpg');

If you look in the html source of the page there is:

<head >
    <script>
        var require = {
            "baseUrl": "http://example.com/pub/static/frontend/Magento/luma/en_US"
        };
    </script>

(assume that Magento/luma is your current theme)

../images/index.jpg is relative to pub/static/frontend/Magento/luma/en_US/css/ because the CSS file (styles-m.css/styles-l.css) is in the css dir.

As for images in modules there is an example in vendor/magento/theme-frontend-blank/Magento_ProductVideo/web/css/source/_module.less:

background: url(../Magento_ProductVideo/img/gallery-sprite.png) bottom right;

where img dir is in vendor/magento/module-product-video/view/frontend/web/. It should work with a directory named images too.

| improve this answer | |
-2

@users who commented below the question It works perferct. use this syntax

background-image:url('/media/wysiwyg/homepage/name-of-background-image.jpg');

don't try to use the url that you get by inserting image from cms. That double braces and media then wyswing bla bla won't work.

| improve this answer | |
  • @{baseDir} is not CMS syntax, it's a LESS variable (or should be) – Fabian Schmengler Oct 6 '16 at 19:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.