I`m want to make a sprite image, this is my css:
img.Bayern
{
background: url(Images/Popular.png) no-repeat;
width: 14px; height: 11px;background-position: 0 0;
}
and my html:
<img class="Bayern" />
But the image is not displayed, however when i place the css code inside style="" , it works properly.
I checked this similar question: CSS code works if put in style="", fails if put in external css file
and did put the img inside:
<span id="nav-flag">
<img class="Bayern" />
</span>
#nav-flag img.Bayern { ...same css...}
But it still doesnt work. Also i changed the relative path to: ../Images, ./Images, into '...'.
Does anybody knows what im doing wrong??
You're using a relative URL on background image Images/Popular.png (i.e. the URL did not start with a leading slash / nor the scheme like http://).
When using such a relative URL in style attribute, it's relative to the request URL of the webpage as appears in the browser's address bar. So if it's for example http://example.com/page.html, then the image is expected to be in http://example.com/Images/Popular.png.
When using such a relative URL in a CSS file, it's relative to the request URL of the CSS file itself. So if it's for example http://example.com/css/style.css, then the image is expected to be in http://example.com/css/Images/Popular.png.
You need to make sure that the image file is exactly there where the specified URL expects it to be (so, put it in same folder as the CSS file), or you need to fix the URL accordingly so that it's properly relative to the request URL (so, use /Images/Popular.png instead).
Unrelated to the concrete problem, it's quite strange to specify a CSS background image on an <img> element. You normally specify that on some block element like <div>.
Related
I am trying to put a background on a div using a method that I've been always using ever since. But for some reason, it isn't working. These are the things I tried:
Checked the syntax, its correct
Checked the path or typo, although I copied the path from the security tab in the properties of the image
Putting different elements inside, even though I already have sub divs inside.
I also tried this property to other divs and the body, still nothing.
I removed the bg image property and tried bg color instead, it worked.
CSS:
#menu-container{
width: 100%;
height: 800px;
margin-top: 760px;
background-image: url("C:\Users\aaron\Desktop\MODULES\WEB301\WEB301(HTML)\media files\bg.png");
}
You cannot load an image from C:\
However if you add file:/// to your path like file:///C:/Users/.....jpg this might work in some Browsers (not all). Otherwise you will have to use relative paths. This means you reference the JPG in relevance to where the HTML or CSS file is sitting.
Read this for more details about relative pathing.
I have been having this issue for awhile now. I'm using reactjs and trying to add a background image to a div tag
<div className="ficon"></div>
in the css file I have
.ficon {
max-width: 100px;
max-height:100px;
background-image: url('/Users/anthonychoi98/Documents/GitHub/portfolio/src/images/folder-icon (1).png');
}
The thing is that it works when the url address is http or from the internet, but not when it's local in my computer. I tried using the relative path and that didn't work either. It compiles without any errors or warnings, it just doesnt display the image. I know the url is right because it works when I use it as an image.
<img src="/Users/anthonychoi98/Documents/GitHub/portfolio/src/images/folder-icon (1).png"/>
Thanks in advance!
Have you tried using a relative path to the image file? For example:
<img src="src/images/folder-icon (1).png" />
Also consider removing the space from the filename.
im really new to this but heres my problem. I need to upload a pic onto my website (im using aptana studios 3). So i save my image as jpeg and use the code:
now it acknowledges that I am uploading the picture but it won't load. Do i have to convert the image or save it a certain way?
Oh buddy, make sure to post the code you're having issues with. In any case, it doesn't really matter what file extension you use (though .png may be the best for web). I'm assuming this is hard-coded HTML, if that is the case, I would use a simple <img /> element to display a picture. Make sure the image is saved in a nearby directory.
<div>
<div class="item"><img src="./example.png"/></div>
</div>
In the example above, example.png is located in the same folder as my index.html file. We use the attribute src, not href. An href attribute dictates what page is to be loaded when an element, e.g. an <a> element, is clicked on. If you have a CSS stylesheet, it might be preferable to load the image as a background-image to a <div> element, so that it would be easier to manipulate image properties like height and width. An example of that would be:
<div>
<div class="item"/></div>
</div>
..and the CSS:
.item {
background-image: url("boxes.png");
width: 800px;
height: 600px;
background-size: contain;
}
Here, I set the image's height and width, and tell my styles that I want the whole image to be show with background-size: contain;.
I hope this helps.
I need a big banner at the top of the screen going from end to end. It has to be a link and on the banner is an image. I have all that set up and working. However, around it all is a gray box and in the top left corner is the icon that is displayed when no image is found. How do I remove the box and the icon?
header.php
<body <?php body_class(); ?>>
<a class="vcuLink" href="http://www.vcu.edu/" >
<div id="topBanner" class="vcuBanner">
<img class="vcuLogo" src="vcu.png" width="910" height="59">
</div>
</a>
<div id="page" class="site">
<div class="site-inner">
I do not think showing more is necessary.
style.css
.vcuBanner {
position: relative;
background-color: black;
z-index: 100;
margin: 0;
padding: 0;
width: 100%;
height: 62px;
top=0;
}
.vcuLogo {
position: relative;
background:url(vcu.png)no-repeat center;
height: inherit;
width: inherit;
z-index: 101;
}
EDITS: More information and a screen shot.
When either the background:url line in style.css or the img tag in header.php is deleted, the image in the banner stops showing. However, when the img tag is there so is the weird icon and outline, leading me to believe that the img tag is the culprit.
Screenshot:
In the VCU banner at the very top, you can see what I am talking about. In Internet Explorer, the icon at the top left is an X button instead and there is no outline.
There are many possible causes for this, so I’ll try an educated guess at what seems the most likely cause.
I don’t know where your files are located relative to one another, but the way your markup and CSS here is written, the file vcu.png should be in the same folder as the PHP file where you’re displaying it (presumably index.php, given the URL in your address bar) for the <img> tag to work. Similarly, it must be in the same folder as the CSS file for the background declaration to work.
Since the position of the <img> tag itself is not specified in your CSS, it should show up in the top left corner of the container. The background image is centred, so it should show up in the centre. Given that there is an image in the centre and a missing image icon on the left, it would seem it is the HTML <img> tag that points to a nonexistent file. That in turn means that the PNG file is in the same folder as the CSS file, but in a different folder than the PHP file. Perhaps the CSS and PNG files are in a subfolder called style or something like that?
When either the background:url line in style.css or the img tag in header.php is deleted, the image in the banner stops showing.
This makes sense. Since the CSS-defined background is declared on the image tag (not the containing <a> or <div>), removing the tag from the HTML markup naturally also removes the background image. Conversely, since the HTML tag is pointing to an incorrect path, having the tag there also means there will be a missing image icon.
You can solve this in two simple ways:
Figure out where the image is located relative to your index.php file, and make sure you point to the correct location (perhaps src="style/vcu.png" or something like that). Then style the <img> tag with something like margin: 2px auto; to centre the image and give it a couple of pixels of space at the top and bottom, and get rid of the background declaration in your CSS.
Remove the <img> tag from your HTML altogether, replace it with (to make the containing <a> non-empty), and style the container to be display: block.
The first yields more semantic code and would be my preference; but both should render the same in regular browsers. Removing the <img> tag also removes its alt attribute, however, so users relying on text-to-speech systems will have no way of knowing what that link actually does, since the only meaningful content it will contain is a non-breaking space.
I am using the following code, but it is having no effect!! Can this be done?
html {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
This will work if you actually have an image at the specified location, although it's usually applied to the body element. It could be that the body element has a background colour that is covering the image.
Note that paths are relative to the style sheet file, not the HTML file embedding it, so a path pointing to images/repeat-x.png in /css/styles.css would result in /css/images/repeat-x.png.
Yes, it can be done, but it needs to be on the <body> tag.
Your image might not exist, or you might have a different background covering it.
If you are trying to set the background of the entire page I'd recommend:
body {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
make sure the url is correct, you can use browser debug tool like Firebug in firefox to inspect the html