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
Related
I have tried to link a path for an image in my CSS several different ways but it won't work is there anything that I'm missing?
background:src="C:\Users\simcity\Documents\HTML\Header.jpg";
It looks like you're trying to set a background image.
In that case
background: url('C:Users/simcity/Documents/HTML/Header.jpg');
would be the appropriate method.
Actually you must not use local paths, but else URL paths so for example:
background:src="C:\Users\simcity\Documents\HTML\Header.jpg"; might be:
background:src="Header.jpg"; if your image resides at the same level of your html document or background:src="/path/to/your/html/and/img_folder/Header.jpg"; if the image is in another folder (the folder must be at the same level of your html)
EDIT:
is background:url('path for the image') not background:src="path for the image"
I think the CSS syntax what you are looking for:
#id {
background: url("C:\Users\simcity\Documents\HTML\Header.jpg");
}
My css file location htdoc/anyFolder/css/style.css and image folder file location
htdoc/anyFolder/image/search.png. I used background-image rule in css file like background-image: url("/image/search.png");
but i does not find the image. Browser look for http://localhost/image/search.png while it should look for http://localhost/anyFolder/image/search.png. Where is the problem. I tried
background-image: url("../image/search.png");
background-image: url("/../image/search.png");
background-image: url("./../image/search.png");
none of this work. Cannot find where is the problem. Does it depends on where the css file is included.
If your paths are
htdoc/anyFolder/css/style.css and
htdoc/anyFolder/image/search.png
This should work:
background-image: url("../image/search.png");
This should also work:
background-image: url("/anyFolder/image/search.png");
But you say they didn't. You should check if the names of files and folders are correct and also if you have the base element on HTML, because it could change the path where the browser looks for files.
Does it depends on where is include the css file.
Yes. The path to your images is relative to where your css file is.
Just use:
background-image: url("../anyFolder/image/search.png");
Try putting the html and css file in the same folder
Maybe late, but solution is:
bacgkround-image: url(../search.png)
no need for "anyFolder","image"....
So I am working on a website and I'm trying to set the background of empty div with a set size and I can't figure out why it isn't working. Anyone see something I don't? Thanks, Tim.
Code:
.headerbg{
width:100%;
background-image:url('bg.jpg');
height:500px;
margin-bottom:25px;
}
<div class="headerbg">
</div>
To prevent such errors, you should define your urls relative to the document root. For instance, if your image is at http://example.com/path/to/image.jpg then you should use url('/path/to/image.jpg'). This removes any possible ambiguity.
There is nothing wrong with your code, when I try it with a different image, it works fine:
background-image:url('http://placekitten.com/100/100');
http://jsfiddle.net/Guffa/bWKBB/
So, the reason for the problem is that the browser can't find the image. There can be several reasons for that, like:
The image doesn't exist
The image exists in a different folder
If you have the CSS code in a style tag in the page, the URL for the image is relative to the location of the page. If you have the CSS code in a style sheet, the URL for the image is relative to the location of the style sheet file.
I create CHM help file.
For decorate it I use css and option 'background'.
All my images saved in img.
My css setting for header like this:
.data{
width:100%;
height:80px;
display:inline-block;
background:#fff url(/img/bg_fill.png) repeat-x;
}
HTML code:
<div class="data">Hello world</div>
In HTML everything is OK, but when I make CHM file background does not have background.
Why? Maybe path is wrong? Somebody have simular problem?
That's problem with the img path. I suspect img folder is in the same directory where your css and html files are located. If so, try to remove first slash in image url: url(img/...
Well, I resolve my problem in my self.
During in experement I saw next sequence, when I add image in tag img and ny header is show.
I think whem CHM maked program does't add image into CHM file and all path is wrong. When I add images in div which hide - all resources is add and show my header.
Just simple solution is we just need to provide full path like where the image is located like C:\Documents and Settings\User\Desktop\Images...
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.