I'm trying to create a little HTML5 mobile game. To avoid any problems with screenresolution I'm using .svg as backgroundimages. While working on the local server the images don't get displayed on the final server: http://tangera.bemoredifferent.com/. It would be great if anybody has a solution for this problem.
Daniel
If you like to use .svg file as background, you must add below code in your stylesheet
background-size: cover;
Reason why, see the documentation https://developer.mozilla.org/en-US/docs/CSS/background-size
Demo here: http://jsfiddle.net/robertc/c9LgV/
Good Luck !
Related
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?
bit.ly/ZwCln9
I have like 3-4 Google Web Fonts going on here and it looks mint in IE/FF, but the fonts are choppy and gross in Chrome. I read you can download svg files or something onto the server? I'm using Wordpress and need step-by-step help with this because I suck.
Where do I get the files and where do I upload them to via ftp? Whats the code I use in CSS?
Thanks for all of your help :)
You don't need to use SVG if you don't want to. The fonts will never look the same across all browsers because each uses a different engine. However, you can always reset to make it look as close as possible. Here is a quick reset that you can add at the top of your css file that will solve this issue.
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal
}
Or you could just get a full CSS Reset, like the YUI reset, or Normalize.
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'm encountering a strange problem. I was working on converting a PSD to CSS / HTML. I'm using some PNG-24 as image replacements for logos and such. While working on the file, the CSS is embedded in the HTML HEAD
I finished working, all images and styles worked great. I then transferred the CSS into a linked stylesheet. All of a sudden, the image-replaced PNGs don't work (just don't show up) but ALL the other styling is fine.
If I then copy and paste the CSS from the file, BACK into the HTML and embed it in the HEAD it all works fine again...
anything i'm missing? Not sure why only 90% of the styling would work in the linked file and more-so, that fact that linking the stylesheet is making only certain rules not work..
nevermind -- as I wrote this i realized the relative links for the images were bad when i moved the CSS. It really helps writing it all out like this :)
Have you checked Firebug to see if the styles for the images are listed?
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)