I have a Folder Structure as it folows:
App_Data\Sitefinity\WebsiteTemplates\MySite\App_Themes\Mytheme\Images
I have images in the Images folder.
What should be the url in main main css file which is used as a theme for most of the pages.
I have tried different variants but unsuccessful.
The css file is located in:
App_Data\Sitefinity\WebsiteTemplates\MySite\App_Themes\Mytheme\Global
Unsure what you mean, but if you are trying to reference a url in a different directory use the following:
div { background-image: url('../Images/example.jpg');
...instead of:
div { background-image: url('/Images/example.jpg');
I would put the Images folder under the \Global folder and then in the main css just reference the images by url(images/sprite.png) for instance.
To add images in Sitefinity, you go to Content | Images menu. Then you click on Upload Images button to select an image from your local drive.
To create a folder so you can put your images in, you select Create a Library button. Then you upload your images to it.
To reference the image, just click on it, and select View in Original Size.
That will give you the URL to the image.
Example:
http://example.com/images/default-source/MyImages/img.jpg
Then you can use that URL to reference your image in your html style:
body {
background: url('http://example.com/images/default-source/MyImages/img.jpg') no-repeat;
}
Related
My image is called main-homepage-img.jpg, it is located in the img folder that is in my project folder along with index.html and style.css. I have tried background: url('../img/main-homepage-img.jpg') and plenty more variations, none working. How do I retrieve it? I have no issue doing it in HTML but I'd like to retrieve it via CSS.
If your file directory tree is structured how it sounds, it sounds you can just use background-image: URL('./img/main-homepage-img.jpg'); and it should be able to find the image.
I'm trying to design my ionic app, and the first step for me is to add a background image. But it won't get visual.
I created a directory in my www folder named img, containing my image.
And in my homepage (home.scss) I've added this code:
page-home {
background-image: url(../img/logo.JPG);
}
This is the errormessage I'm getting:
"This inspection checks references to files and directories."
I guess "page-home" is the name of your component selector.
Instead of putting the background-image directly inside it, you can try to put it inside (if your .html has a , without code, it is hard to tell)
page-home {
ion-content {
background-image: url(../img/logo.JPG);
}
}
Note: since your file name is "logo.JPG", I am wondering: are you trying to make some kind of splashscreen? In that is so, you may prefer directly put your image in the resources folder and configure the splashscreen in your config.xml
I want to create an extension which contains an AssetBundle, which provides a simple static CSS file. In that static CSS file, I want to use an image file, which is also part of the extension.
How can I know the image file's URL so I can use it inside the CSS file?
If I register the image file as an asset, it will get a random URL that we cannot predict! So it would be impossible to do something like:
.some-selector {
background: url('/assets/?????/image.jpg');
}
So, how can this be done?
For further clarification, here is an example folder structure of such extension:
extension/Widget.php - some widget that registers our AssetBundle
extension/AssetBundle.php - asset bundle that registers the css
extension/assets/css/style.css - the css
extension/assets/images/image.jpg - the image we want to use inside style.css
In this case I would recommend to include also a new css files into the asset definition. In this case the image and css file will be in the assets folder and you can specify relative path, not absolute.
e.g.
/assets/a4dc56/image.jpg
/assets/a4dc56/style.css with the following content:
.some-selector {
background: url('image.jpg');
}
My css file is available on the inner folder of css subfolder /css/coverdesign/mycss.css.
From that css I need to load background image url. Image is available on sub-folder /images/
I had used the following code.
background: url(../images/cover.jpg);
Guide me to load image by using proper url
Folder Structure:
/css/
/coverdesign/
- mycss.css
/images/
- cover.jpg
you need to go up 2 levels
background: url(../../images/cover.jpg);
first level to coverdesign, then css, then down into images
try absolute path
background: url(/images/cover.jpg);
or relative (go up two level)
background: url(../../images/cover.jpg);
when my css is located in the root of my website, the background loads fine by adding
background: url(images/main-bg.jpg) repeat;
into the body, but when i move the css into a folder named "css" and re-link the HREF it seems to disappear?
Are you using relative links correctly? If you're moving that .css file into a folder, the new relative path should be
background: url(../images/main-bg.jpg) repeat;
...if the images folder is in the root folder as well.
You can use a debugger like Chrome's developer tools or Firebug to double check if the resource is being loaded correctly.
Try to change path to resource background: url(../images/main-bg.jpg) repeat;
You'll need to update the CSS. The url is relative to the relationship of the CSS to the image (not the document). Try background:url(../images/main-bg.jpg) repeat;
That's because your CSS is now searching for the image in (root)/css/images/main-bg.jpg, you need to use a relative path.
background: url(../images/main-bg.jpg) repeat;
.. means go back one directory.