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);
Related
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;
}
I'm trying to link to an image in the WordPress plugins folder from style.css. I've tried the following but that doesn't work:
.example {
background: url( images/photo.jpg ) center center no-repeat;
}
Plugins folder image: /wp-content/plugins/my-plugin/images/photo.jpg
Stylesheet is here: /wp-content/themes/my-theme/style.css
I know you added the "relative-path" tag, but have you tried using an absolute path, including the domain name?
Consider trying
.example {
background: url('http://full-path.com/wp-content/plugins/my-plugin/images/photo.jpg') center center no-repeat;
}
If you want to use a relative path, it also looks like you could try:
../../plugins/my-plugin/images/photo.jpg
This assumes the server is looking from the folder the CSS is in to resolve the path to the photo. The ".." represents moving up a directory level.
Hope this helps!
You can use so called semi-relative paths for resources:
.example {
background-image: url( '/wp-content/plugins/path/to/image.jpg' );
}
/wp-content/ above maps to http://www.domain.xyz/wp-content/, which allows you to omit the domain portion from the URL path to the image. If you omit the starting / character, the stylesheet will look for wp-content/... within the directory where the CSS file is.
Note: the above method wont work if your plugins directory is outside wp-content.
If you want the exact plugin directory path using WordPress functions and constants, consider infusing CSS with PHP: http://css-tricks.com/css-variables-with-php/. This way you can execute some PHP within the CSS file, which could include fetching the WP plugins directory to a PHP variable.
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.
im about to build a GUI and I am trying to load an image as background image via css.
My HTML sheet is nearly empty except the headline and a div container in which I load the GUI, built with JAVA and the Google Web Toolkit.
Loading the background image from the internet works out pretty well!
.Bild {
background: url("http://developer.aldebaran-robotics.com/media/img/home/nao_h25.png")
no-repeat
center;
}
BUT now i want to load it from my hard disk, better to say from a folder in the project.
The structure looks like this:
workspace → project → war → css file
workspace
→ project
→ images
→ image.png
I tried it by using a relative path. I am not sure if I did it correctly. It doesnt work:
.Bild {
background: url(/images/image.png)
no-repeat
center;
}
Im sure you can help me!
Thanks a lot
You need to provide the path of the image file relative to the css file
Lets take your directory structure example:
workspace/
project/
war/
cssfile.css
images/
image.png
Your image path relative to the css file would have to be
../images/image.png
.Bild {
background: url(../images/image.png)
no-repeat
center;
}
Here: .. means one directory above the current directory. You can use ../../ to go two directories up.
To figure out the relative path, you need to navigate up to the common parent directory and then walk down to the location of the media file. In this case, the common parent directory is one level up, hence ../ is enough and then walk down the directory structure images/image.png.
There is nothing wrong with the syntax. So the problem must be with the path.
By starting the url with a slash /,
/images/image.png
implies an absolute location of
http://some-host-name/images/image.png
is that where your image is?
I've found instruction on where to place this image
body { background-image: url(example1.jpg); }
But I can;t figure out how to format or get the "url"( ) it's looking for. Do I need to save it in a different place, or format my image differently?
You could use this CSS:
body {
background: transparent url(http://mydomain/content/image.jpg) no-repeat 0 0;
}
or of course:
body {
background-image: url(content/content/image.jpg);
}
Your URL can be absolute, like in the first example – or relative, like in the second. You have to notice, that when placing a relative path, it is relative to your stylesheet definition, not your HTML-Document. Example with directories:
- webroot
index.html
img/image.jpg
css/main.css
When you put the definition from above into the index.html the URL would be:
url(img/image.jpg)
but when you place it inside the main.css it would be
url(../img/image/jpg)
One final thought on this: If you have blanks/whitespaces in your path, you have to wrap the url in single or double quotes like:
url('image/my image.jpg')
You can use any standard url such as
http://example.com/xx.jpg
or from your directory
/images/xx.jpg
Is this what you are looking for.
You put the url in relative to the stylesheet, NOT the site root. For instance if you have this structure:
root
- images/
- image.gif
- css/
- styles.css
- index.html
The your url path would be url('../images/image.gif');
On an unrelated note (and just because I found this out the other day), if you're using a .htc file (like PIE.htc for IE rounded corners for example) then the behavior url needs to be relative to the root and not the stylesheet.