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?

5
  • Did you figure out how to add a background image? I'm trying to do the same thing.
    – Nikkawat
    Jun 30, 2016 at 18:40
  • No. I didn't get how to add through overriding .less file . For the timing,I have added my custom css & placed that background css in that file Jul 1, 2016 at 4:05
  • DId u guys check this to override .less file magento.stackexchange.com/questions/102994/…
    – Sushivam
    Jul 5, 2016 at 11:53
  • And this too i hope is helpful for overriding custom theme magento.stackexchange.com/questions/110164/…
    – Sushivam
    Jul 5, 2016 at 11:53
  • Ya. but only background image css does not work. If I change background color, that works. Jul 6, 2016 at 4:14

3 Answers 3

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
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.

-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.

1
  • @{baseDir} is not CMS syntax, it's a LESS variable (or should be) Oct 6, 2016 at 19:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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