I just installed xampp and I brought one of my live sites into it to be able to start working from localhost.
So to view my site, I navigate to localhost/example.com
I noticed some issues with images when on my html, I had for example:
<img src="/new_pictures/05.jpg" alt="Central Market"/>
Image wouldn't show up, but then I removed the / and this works:
<img src="new_pictures/05.jpg" alt="Central Market"/>
I seem to have a similar problem with the CSS background image, but I can't get it to work-if I remove the / there, the image doesn't show up on the live site. How do I make the background image show up on localhost?
Example CSS (works in live site but not localhost):
.outeremailcontainer {
height:60px;
width: 275px;
background-image:url(/images/feather_email2.jpg);
text-align:center;
float:right;
position:relative;
z-index:1;
}
Thanks!
The image paths in your stylesheet should be where the image is relative to the stylesheet, for example if your .css file is in a directory like this on your site:
/css/styles.css
Your path should look like this (go up a directory, then into images)
background-image:url(../images/feather_email2.jpg);
You can try the base tag - supported in most popular browsers - and then supply paths relative to the href attribute of the base tag. Or make sure you supply correct paths relative to the CSS stylesheet
Try using ./ instead of / and make sure that you are specifying the correct path.
Related
How to access images that are one folder above. The background-image does not appear in the html because of wrong directory or reference.
background-image:url("imgs/hours.png");
#schedules{
float: left;
margin-left:10%;
background-image: url(file:///C|/wamp/www/web/crosscafe/imgs/hours.png);
}
span {
font-weight:bold;
}
As said before, and just to make sure, if you're using WAMP you need to access the webpage through the localhost or any address that was provided for that purpose. Accessing through file:// normally ignores most of the server-side usage WAMP provides you with.
That being said, I think your problem is fairly simple. If you are using a framework file structure you probably have the following strcture:
imgs/
css/
js/
index.html
So, and since you're working on your CSS which is in the css subfolder, your URL needs to be the following:
background-image:url("../imgs/hours.png");
The two points (../) tell the browser to go to the parent folder, then into the imgs folder and then search for hours.png.
First of all, you should only comment css using /* and */. // in css will not be treated as comment at all.
For your problem, you should use firebug to make sure that your element which id is schedules have a appropriate height and width.
And, if you are using WAMP, access your website from a URL start with http://, that page could not display a image stored on your local side, I mean, via file://. This is prohibited by your broswer. You should use the relative path instead, and the relative path is start from your css file.
So you can try this:
#schedules{
float: left;
margin-left:10%;
background-image: url(imgs/hours.png);
height: 100px;
width: 100px;
}
and save "imgs" near your css file.
If you still have problems, I think you should paste your HTML on.
If you try to display an image from that imgs directory in other place in your website, does it is shows? If not, it can be your .htaccess file. It might be blocking the access to your images dir.
#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
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 am having a problem with image paths in my css. My directory structure is below with folders in bold.
mp.master has a reference in it for menu.css, both of my testpages are using mp as its master page. testpage2.aspx (in the root folder) looks correct, testpage1.aspx (inside of a sub folder) is not able to find images (ie navBG.png) specified in menu.css. If I move testpage1.aspx to the root it works fine.
Other styling in menu.css is applied to testpage1.aspx, just not images.
WebSiteFolder
css
menu.css
img
navBG.png
SubDirectory
testpage1.aspx
mp.master
testpage2.aspx
In menu.css I have the following:
.no-cssgradients nav, .no-js nav { padding-bottom:4px; border:none; background:url(../img/navBG.png) repeat-x 0 0; }
What am I doing here? I have tried to state the absolute path with ~/, ./, ../ but nothing seems to work.
You should try /img/navBG.png. Basically this means that you are using an absolute path in css. Caution: absolute path in css means that the image uri is in the following pattern [host name] + [url you have specified in css], so if your site is located in virtual folder the uri won't be resolved correctly.
have you tried /img/navBG.png?
You're going to want to use absolute pathing rather than relative. /img/navBG.png is what you're looking for.
Drag the CSS file from Solution Explorer to the head section of the master page in code view :)
Your CSS rule and path are correct.
I found my answer here How to get JqueryUI to work with ASP.Net Master Pages and multiple paths?. I was making a site to try out some css3/jquery stuff and my problem was not in referencing my css, but in referencing the jquery library.
this.Page.ResolveURL is your friend here:
<script type="text/javascript" src='<%= this.Page.ResolveUrl("~/resources/js/jQuery.js")%>'>
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...