My svgs as background-image or even background is not showing up in GitHub pages. They seem to be working locally though. I used sass as a preprocessor for css, if that's relevant.
Can anyone help me debug this. Your help would be appreciated!
Project link
Github repo
your background-image must look like this.
background-image: url(../images/pattern-hills.svg), not that
background-image: url("/images/pattern-hills.svg"),
Related
So my header image shows up when I open Chrome from my code editor (webstorm) but after I close webstorm and open index.html manually from my project folder, the header image won't load/show up, background-image: url("/assets/heroimage.jpg"); any idea why?
Same problem on github when I host my website
Thanks
Have you tried with a "relative path" adding a point at the start?
background-image: url("./assets/heroimage.jpg");
as mentioned Here the problem is with how you linking the image to the CSS.
Try removing double quotes and removing unnecessary backslash:
background-image: url(assets/heroimage.jpg);
or
background-image: url(./assets/heroimage.jpg);
Hope it helps :)
I tried to include a background image on my landing page. My CSS file is here:
/modules/core/css/core.css
My image file is here:
/modules/core/img/image.jpg
In the css file I tried doing this:
background-image: url("../img/image.jpg");
I also tried doing this:
background-image: url("core/img/image.jpg");
However, none of them are working or the solutions I looked at this site for other similar questions. Anyone knows how to fix this?
if CSS /modules/core/css/core.css and image is /modules/core/img/image.jpg,
background need be background-image: url("../img/image.jpg"); but are you sure is jpg or JPG, sometimes this can be bug :)
Check the network tab in inspector to see what happens when the browser tried to load the image. What do you get in the status column?
I have an issue at the moment where in IE8 my background-image properties in CSS files are being changed to url("null") instead of the original URL that's in there.
Not sure where to look, but I suspect it could be selectivizr or JQuery UI.
Anyone experience this problem before?
EDIT:
Here's the CSS code
span.k-icon
{
background-image: url('http://cdn.kendostatic.com/2012.2.710/styles/Default/sprite.png');
}
EDIT 2:
I removed selectivizr out of the equation, which solves the problem. So this is definitely something to do with selectivizr.
Regards,
Jacques
I found the answer. This is a limitation in Selectivizr.
You can't use CDNs or external assets with selectivizr, CSS files and the like must be hosted on the same domain and relative paths must be used.
Here's a post about it. http://bigredtin.com/2010/selectivizr-with-css-on-a-cdn/
Regards,
Jacques
I'm having a problem where I have a background image that will show up perfectly fine when I'm using it in dreamweaver, but once I upload my site and the CSS files and everything it won't show.
Here's my CSS code:
.ELSsubbg {
background-image: url('../images/NTG_images.jpg');
background-repeat:no-repeat;
background-position:top left;
}
Any help would be great.
Because you are using a relative path in your CSS, where the stylesheet is looking for the image may be different than where you are seeing it when you go to it directly in the browser.
Try using an absolute path to your images directory instead of a relative one. Assuming you can see the image in your browser at http://www.website-name.com/images/NTG_images.jpg try removing the dots to make the path absolute from the root of your website.
background-image: url('/images/NTG_images.jpg');
Have you uploaded the image? Have you uploaded it to the right place? Is the CSS looking for it where you think it should be?
The easiest way to answer these questions is to use the browser's developer tools (eg Firebug) to watch the network traffic your page generates. Look for the request where it tries to load the graphic. Is it giving a 404 error? Probably.
If you are getting a 404, look at the URL it's calling to find out why. The answer should become clear.
I am unable to get the background picture to show in my pages. I am trying to do this in the master page using CSS.
I have a CSS which contains the following:
body {
background-image: url(../images/background.jpg) no-repeat;
background-attachment: fixed;
margin-top: 0px;
}
I know the CSS is being read because all other styles defined in it are working on the .aspx pages... except of course the background image, the background remains white. (This works perfectly fine in .php pages by the way.)
I have been searching online like crazy and all the answers I find, say the above CSS code is the answer... but it is not working!
I am using the following:
Microsoft Visual Studio 2008 Version 9.0.30729.1 SP
Microsoft .NET Framework Version 3.5 SP 1
Firefox Version 3.6.6
If anybody knows how to get this to work, PLEASE let me know!
The CSS background image technique is correct. But have you looked at things in a Http debugger (such as the net monitor in firebug or fiddler) and figured out if your relative pathing isn't screwing the proverbial pooch. Or, CSS paths and ASP.NET and MasterPages sometimes don't quite agree, you probably have an issue of requesting the image from the wrong url so it isn't showing up.
Thanks to Wyatt Barnett I was able to figure it out. I used firebug to edit the CSS file and discovered the problem.
My path was wrong, I changed it from ../images/background.jpg --> ./images/background.jpg
The attribute tag was wrong, I changed it from background-image --> background
I don't know why I did not think to do this with firebug to start with (it is after all why I have it) so thank you Wyatt for the proverbial slap upside the head - I needed it! :o)