After extensive research, I have tried
background-image: url("/images/image.jpg");
../../images/image.jpg
../images/image.jpg
/images/image.jpg
./image.jpg
And the entire URL. Plus others. I don't know what I'm doing wrong.
The path is forward one directory.
This is my CSS:
nav {
background-image: url ("./images/navmenu.jpg");
width:100%;
height:200px;
margin:0;
display:block;
padding:0;
}
Remove the space after url and also remove ./ before images in the path:
background-image: url("images/navmenu.jpg");
nav {
background-image: url ("../images/navmenu.jpg");
width:100%;
height:200px;
margin:0;
display:block;
padding:0;
}
use double dots before /images this will work for you.
Try opening the page up in chrome, then inspect the nav element then look at the css that your chrome is trying to access (mouse over the url portion in the css styles tab. It should help you identify your issue.
Please check whether folder name is images or Images. Accordingly use the style -
background-image: url("images/navmenu.jpg");
or
background-image: url("Images/navmenu.jpg");
if it is happening in your website please share the url so that we can find the exact problem.
Thanks
Related
i read a ton of similar problems and test all solutions but no one works...
this is my css:
.button
{
background-image:url(../Immagini/pulsante.jpg) !important;
background-color:#004878;
padding:0.4em 1em;
text-decoration:none !important;
border-radius:5px 5px 5px 5px;
border:1px solid #C5DBEC;
font-weight:bold;
cursor:pointer;
margin-right:0.1em;
overflow:visible;
position:relative;
text-align:center;
display:inline-block;
behavior: url(../Scripts/css3Pie/PIE.php);
}
i add a simply alert in the file (even in the htc ones) and it's shown so the file is loaded.
as you can see i use the php version to avoid server problem but nothing change
i try even to remove !important in css but still it didn't work
What i miss?
EDIT
this is my folder structure:
ROOT
-->Defalut.aspx
-->Pages
-->Page.aspx
-->Scripts
-->cs3Pie
-->PIE.php
-->all other css3Pie...
-->Css
-->Style.css
From css3pie.com about behavior:
Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.
Just you absolute path
-ms-behavior: url("http://css3pie.com/pie/PIE.htc");
or path relative to html:
/* You need to use this code if your html file in <site>/index.php
And PIE-file in <site>/Scripts/css3Pie/PIE.php
Also check if your get access to PIE-file from your browser
via link like http://<site>/Scripts/css3Pie/PIE.php
*/
-ms-behavior: url("/Scripts/css3Pie/PIE.php);
> Working example on CodePen (tested in ie8)
Using symbols in SVG formats seems like a good idea to me, so you can only load a single SVG file, and use it as a sort of spritemap.
It feels wrong to me though, to directly include the <svg></svg> tags in my html for icons, since they are presentation only and should be added in my CSS.
Is there a way to add a symbol from an svg in an :after pseudo element in my CSS?
You can refer to fragments in CSS this way (fragments must have an ID to identified):
.element {
background-image: url('vector.svg#fragment');
}
You can also show a specific area by clipping it with viewBox:
.element {
background-image: url('vector.svg#fragment(viewBox(0,0,25,25))');
}
Here you can read more about this methods:
http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/
Another method could be to create all your symbols in a icon font.
As Blazemonger mentioned in comment you can give it inside the content of an afterelement.
But if you are setting it as a background of an after you would have more control over it regarding its size,position and any other properties a background image can have
html
<div id = "mydiv"><div>
css
#mydiv{
width:500px;
height:100px;
background:tomato;
}
#mydiv:after{
content:"After of #mydiv";
width:500px;
height:100px;
background:url('http://xn--dahlstrm-t4a.net/tmp/sharp-icons/svg-icon.svg') no-repeat;
position:absolute;
top:200px;
border:solid 1px tomato;
}
You can save the svg as a separate file and give it as url for background
DEMO
Read more on ways of adding SVG to page here
I am using this scheme for desktop background. For the homepage I am using the body tag with the class "gd", so the background is given on the home page. The given css is working fine in FF,Chrome,Safari but I am having problem hacking it for IE.
body{
color:#0066cc;
background:white;
padding-top:20px;
min-width:500px;
height:100%;
}
and this style for the main page
body.gd{
background:#87ceeb url("../images/bg.jpg") bottom center no-repeat !important;
background-color:#87ceeb !important; /*P.S. This line just added for testing */
}
The last line in .gd class is not even showing the background color, it might be possibility that IE is not accepting the body tag with gd class, but in this class how may overcome this behaviour.
P.S. I am using IE9,IE8 and IE7. Three of them are not showing.
Thanks for the help #7th comment.
The problem here is with the html tag.
Which was before
html{
background-color:#ffffff;
zoom:1;
**background-color:transparent\9;**
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffffffff)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffffffff);
padding:0;
margin:0;
}
And After
html{
background-color:#ffffff;
padding:0;
margin:0;
}
And then I realized that background-color:transparent was making error. I didn't know why IE was inheriting it into background, even I've added seperate style definition for the body tag. Any way, Now, It is working fine for me.
P.S. Explanation on this will be much appreciated
So when working with this site locally on my computer the hover over image works perfect. However, when I put the site up on a server then the image doesn't appear.
I'm referring to the links with the grey background image. I've provided the css specifically for the Contact us link.
http://bankruptcyimmigrationlaw.com/NEWSTARTLAW/Home.html
...
#Contact_us li:first-child a {
padding:9px 5px 15px 30px;
margin-top:25px;
background-image:url(../images/DefaultNavBg.png);
background-position:-30px -15px;
background-repeat:no-repeat;
height:76px;
width:350px;
border-bottom:none;
text-decoration:none;
}
#Contact_us li:first-child a:hover {
padding:9px 5px 0px 15px;
margin-top:25px;
background-image:url(../images/CurrentNavBg.png);
background-position:-30px -15px;
background-repeat:no-repeat;
height:76px;
width:350px;
border-bottom:none;
cursor:pointer;
text-decoration:none;
}
It appears that your images isn't where you think it is, I'm getting 404. It could be that you didn't upload it, or if your testing on Windows and deploying to *Nix it could be an issue with the case of the file (or directory) name.
You didn't send the image to the server:
http://bankruptcyimmigrationlaw.com/NEWSTARTLAW/images/CurrentNavBg.png
returns 404
Tip: Using webrowser with some king of inspector - for an example Chrome with build-in inspector or Firefox + Firebug is best friend of every webmaster, webdevloper, webdesigner, etc.
Edit
Try to avoid CaseMixing in all your file names and paths. This is very reason of mistakes and bugs, so using same variation of lower case is definitely better.
My favourite notation is_lower_case_underscored.jpg,
using hypens is other recommended way, however it can be reason of mistakes when creating filenames with JavaScript as the hypen can be recognized as minus operator by accident.
hello
can someone tell me why this css does not display png in IE? many thanks
#header
{
width:1004px;
height:309px;
float: left;
margin:0px;
padding:0px;
background-image::url(../images/header.png);
background-repeat:no-repeat;
}
There is a double colon in ::url
Try this:
#header
{
width:1004px;
height:309px;
float: left;
margin:0px;
padding:0px;
background-image:url(../images/header.png);
background-repeat:no-repeat;
}
use firebug on firefox to see where the problem is, i'm assuming since you're aware of the double colon issue this may not be on your stylesheet so the problem maybe in the image file path, put in consideration where the css file is, if in sperate folder you might need to use a couple more of "../" to get back to the root where the page is and call the image in the css relatively