#main {
background: url("images/bg_grey.png");
}
I have this code into my main.css but GWT can't find the image (it is into the default images folder of my GWT-project).
With JAVA there are lots methods like GWT.getModuleBaseURL(), but, into the CSS, how can i recover the correct path for my image?
It's relative to the CSS location.
For example, if the CSS is in /css/myStyle.css, the path for the image would be ../images/bg_grey.png
Related
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');
}
I'm following a tutorial of a responsive website using Jekyll.
I'm working on the header now and I'm trying to use an image as the background of the header, but I'm having problem to find the relative path for this image.
This is the path of the image in my computer: /Users/CaroleCarlos/Pictures/60H.png
and
This is the path of the folder I'm saving my project: /Users/CaroleCarlos/Desktop/DevTips-Starter-Kit-Jekyll-Starter-Kit
I'm using the following code to set the image as the background using sass:
header {
height: 450px;
background: url(../Pictures/60H.png);
}
but I does not work. I've tried another paths also but I don't know what I'm doing wrong that I can't find the image.
I'm using Expresso as my text editor.
I know it is not a hard thing to solve, but I've been trying to make it work for a while now, and I can't figure it out.
You need to go two directories back like the below code. ../ is a filler for each directory level in relative paths.
header {
height: 450px;
background: url(../../Pictures/60H.png);
}
I would recomment you to make your projet in on folder to prevent this.
you should make a folder images like so : /Users/CaroleCarlos/Desktop/DevTips-Starter-Kit-Jekyll-Starter-Kit/images
Then your path should me background: url(images/60H.png)
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.
can some on help me on how i can reference images i have all my images stored in an image folder which is located in the root folder (..\images) in my css class i have the the following
#image
{ background-position: left;
background-repeat: no-repeat;}
.background
{
background-image: url(..\images\image.gif);
}
and in my .cs file i have
image.Attributes.Add("class", "background");
image is a div tag which is in my aspx code !!
when i run this code i image doesnt show, any ideas what i might be doing wrong
You should turn those slashes in your paths around from \ to /
Also, I usually put an url keyword before the parenthesis in CSS, but I am not sure if this is required:
background-image: url(../images/image.gif);
UPDATE: If the image field in your C# code is some kind of webcontrol, say an Image control, you should use the setts on its CssClass property rather than explicitly adding a class attribute. What you are doing now might yield two class attributes in the markup, which might not get handled well. You can do a quick "view source" on your page to test if this is the problem.
If this does not help, see Nick Cravers answers. The path from your CSS to the image is wrong, or the image file is not where you believe it is.
URL references in a CSS file must be relative to the CSS file.
Make sure that compared to the CSS file the image is in ..\images, if not, adjust it to be in relation to the CSS.
Also your background declaration should be like this:
background-image: url(..\images\image.gif);
Example:
CSS = \CSS\styles.css
IMG = \Images\image.gif
Style = url(../Images/image.gif);
CSS = \styles.css
IMG = \Images\image.gif
Style = url(Images/image.gif);
The style definition:
background-image: url(../images/image.gif);
is saying "go up one directory and into the images folder". Try:
background-image: url(/images/image.gif);
This assumes that the images directory is in the root of your website.
I can't figure out why the image is not resolving inside the div id="header_container"
everything looks ok, the image is on the server,,, what's the issue here?
http://winteradagency.com/mrw/index.php
any ideas?
thanks
When you make a CSS url() directive a relative path, it is relative to the CSS file, not the page the CSS is on. In your case, the header_container directive is:
background-image: url(images/logo.jpg);
Because your CSS file is in /mrw/styles/styles.css, the path that the image is being looked for at is /mrw/styles/images/logo.jpg. You need to adjust your CSS directive accordingly. One of the following should work:
background-image: url(/mrw/images/logo.jpg);
or
background-image: url(../images/logo.jpg);
Background image URL's in a CSS file are relative to the URL of the CSS file itself, not to the URL of the parent HTML page which included the CSS file.
So, to fix your particular problem, change images/logo.jpg to ../images/logo.jpg, otherwise it is trying to lookup the image in styles/images/logo.jpg