1

How do you render a background image on a css page.

i.e

#account-links--point {

  background-image: url(/images/pop-up-box-point.svg); 

}

i realise that for a less you can do this:

@{baseDir}images/home-slider/slide-1.jpg

but my css does not use less.The url for my css is:

\app\design\frontend\myTheme\Theme-frontend-default\web\css\local-m.css

the images are stored in my theme folder;

\app\design\frontend\Mytheme\Theme-frontend-default\web\images
2

I have the same problem with images and css to use image as background image.

So the answer is:

#account-links--point {
  background-image: url('../images/myimage.png');
}

".." will tell browser to go back to parent directory that is web directory and look inside images directory for the image file.

This is valid way because if you have development, staging and production website then you don't have to change the domain name everywhere.

| improve this answer | |
  • Happy to help you :-) – Ananth Nov 30 '18 at 16:39
0

I know it might not answer your question in full but how about changing the image directory to pub/media/theme_images and using:

#account-links--point {

  background-image: url('www.mydomain.com/media/theme_images/myimage.png'); 

}
| improve this answer | |

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.