I am trying to setup a simple div which I have done many times in the past but something is going wrong... Here is a fiddle of my code.
http://jsfiddle.net/psychoticpanda/HTtRs/
Either I am going insane, hitting a glitch in something or it is too late for me to code after a 13 hour day of class... Please help me feel sane and help me out! The image works when it is used as <img src="(IMAGE)" /> but when I use it as a background-image: url("image"); in CSS it doesn't work...? I need it to be a background for buttons to go on top without problems! Please help...
If the url() contents are a relative path it is derived from the path of the stylesheet location. So if your stylesheet is /css/file.css and the rule is url(image/filename.png) it will look for it in /css/image/filename.png. You should probably use an absolute path for the image.
Your file path of url("images/map.png") assumes that your images folder is in the same folder as the CSS file. If that's not the case, your path is incorrect. If it is the case, the next thing I'd try (but consider this anyway) is to use background: instead of background-image:—which, on its own, doesn't provide any information about its positioning or whether or not you want the image repeated.
Related
Good evening. I'm trying to make a site with Django. Not being expert in CSS I took a template (minimaxing, from html5up.net). Everything works fine, as you can see (http://secret-reaches-8428.herokuapp.com/lesson/lezioneA00/) except that ordered and unordered list are not rendered as such. I can guess is something in the css, but I can't see where the problem is. There are the three .css files loaded in the header:
http://secret-reaches-8428.herokuapp.com/static/css/style.css
//same_domain/style-desktop.css
//same_domain/style.css
Question is: can anybody point out what part of the css is to be modified or, can anybody point out what the problem is?
Ok, I solved looking for standard css attributes and setting up properties as I wanted. Now I'm just curious to understand why the normal html behavior was overwritten, since there is no reference to in the css files.
You have to update your img sources. You have a problem with your img sources, not with your ul or ol rendering.
You try to reach an image here, but it does not exist. Try to fix the URL reference.
I want a background image on my page (background.png), but some rogue CSS is thwarting me.
I can see that my style.css from line 39 is being overwritten. I would think this is being done by something like style.css. I search and do not find anything but my original desired specification in that file. I can not find out what css is doing the overriding.
I have searched all the css files I can think of for the specified image (bg_p2_28.jpg). I have searched all the css files for background, nothing seems to come up. It is not being specified in the main HTML
I am barely struggling through as a reasonably competent programmer that has not used HTML since the mid 1990's. I am just trying to modify a template I bought.
What techniques can I use, or how do I interpret what I have here shown here to figure out what CSS override is ultimately being pushed into the page?
EDIT:
Adding the !important; works. It feels very dirty for some reason. I do not know why. I have tried following the javascript in, but the debugger is confusing to the uninitiated. Is the Important! a terrible thing to do, or reasonable? I think it would be useful to understand where these are being set in the java code, but when I search the code, I think the values are stored in variable, so can only be caught at run time.
That's coming from the inline style="" attribute.
If you don't see it in the HTML source, it's probably being set by Javascript.
You can right-click the element in the inspector and click Break on Attribute Modifications to find out where.
You could try background: url(src) !important;, not the perfect solution, but i think it will work for you in this case.
The grey element.style means that it's a style attribute directly on the element itself. Any style on an element will override styles from style sheets unless the sytlesheet style is marked with !important
I am using the following css rule:
background: url("http://example.com/background.jpg");
It is not working and I suppose it is because referring to external servers is not supported. Is this true? If so, what kind of workaround I might use?
Not sure if it's relevant, but I need this inline. Testing right now on JSFiddle.
There may be 2 reasons why your background is not working
Your container doesn't have height, width or padding (no area to show the background)
The URL you specified is broken or incorrect. There is no image at the URL you specified.
Otherwise, your background: url("http://example.com/background.jpg"); is Correct
I'm not sure if this was resolved or not but I had a similar problem and I found a simple solution. First off, I used background-image instead of background. Second, I made sure to include the full url. So instead of background: url("http://example.com/background.jpg"); I would put background-image: url("http://www.example.com/background.jpg");
It does work. There must be something wrong with your URL.
http://jsfiddle.net/ebLQQ/
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 using background images in my css, which, obviously, requires writing URLs in the css file.
So, while the relative path might be the same, the base URL will be different between development and production.
So, is there a better solution than:
1. changing it each time manually
2. using resources on the cloud with full URL
3. making the CSS files parsed as PHP, and using some
code in it (and then I have to fix the problem with caching).
CSS URLs are parsed from the directory containing the CSS. Meaning it won't change. So all you should have to do is give them paths relative to the CSS Directory and you should be good.
CSS/main.css
div {
background: transparent url(../images/background.jpg) no-repeat;
}
i asked that question b4 in another forum
http://www.nabble.com/Root-directory-(linking-CSS-JS-etc)-to23911119.html#a23923742
the solution was to use a view helper baseUrl
<img src="<?php echo $this->baseUrl();?>/images/foo.gif">
I use the symfony framework, and I've found that parsing it as PHP works best. It's the most dynamic, and if you ever need anything more than just a URL, you can with the PHP.
One obvious answer to this is use the purest form of absolute URL, a filename, by putting all your CSS images into the CSS folder. That's used a lot. You gain simplicity in your URLs, you can now move or rename the CSS folder itself without hassle, and your stylesheet gets that little bit smaller.