Just an extra tip for those that might struggle with this. The directory structure of your media defines how the background-image should be defined, similar to standard web development. Everything in your MEDIA is accessible at the url:
http://<host>:<port>/resources/fs/<solutionName>/*
So, if you organize your media, and make CSS and Images folder such as:
- Code: Select all
Media
-topImage.jpg
/css
-mystyle.css
/img
-myimg.jpg
That means these items have the following URL:
topImage.jpg:
http://<host>:<port>/resources/fs/<solutionName>/topImage.jpg
mystyle.css:
http://<host>:<port>/resources/fs/<solutionName>/css/mystyle.css
myimg.jpg:
http://<host>:<port>/resources/fs/<solutionName>/img/myimg.jpg
So, when you are in mystyle.css, and you want to reference the those other images, you have to reference according the the URL structure with relative paths. The ".." goes up one directory since you are already in the css subdirectory.
- Code: Select all
.myTopImage{
background-image: url('../topImage.jpg');
}
.myImage{
background-image: url('../img/myimg.jpg');
}
Hope that helps a few people. The docs aren't completely clear on the difference of the paths based on Media directory structure. Now you can organize your media, and reference it properly in CSS.