Not sure what I'm doing wrong here, but I've tried following the example on the relevant w3schools page, but to no avail. So here's what I have so far:
I have four images on my index page, called index1.png, index2.png etc. I combined them into a single png, which is simply index.png. That's my sprite image. I also have a 1x1 transparent image, which is the placeholder for each image in the HTML. Here is the image code:
<img class="index1" src="Images/trans.png" alt="alt" title="title" width="40%" />
And the CSS:
img.index1 {
width:258px;
height:300px;
background:url(Images/index.png) 0px 0px;
}
Testing the page out, I get nothing more than a resized transparent image. The image I want displayed does not show up.
EDIT: Solved. I was an idiot and forgot to go up one directory in my CSS, since my CSS was in a folder on the root. The proper path was "../Images"
Are you sure the path to your images folder is correct? Make sure your path for your sprite is relative to your CSS file, not from where the CSS file is being linked from.
If you had a folder structure like this:
/index.html
/css/style.css
/images/sprite.png
/folder1/index.html
/folder2/subfolder2/index.html
The correct path to use in your CSS file would be this: ../images/sprite.png.
The path would be the same in your CSS file regardless of which index.html file that you would be including it from in the example above.
First and foremost, seeing as though you're using a sprite <img> isn't the correct tag. A div will suffice here. You also don't need to target HTML in your CSS as you've set a class. Try...
<div class="index1"></div>
Also your image url is missing quotation marks.
.index1 {
background-image:url('Images/index.png');
background-position: 0 0;
height:300px;
width:258px;
}
Try using an element other than <img>. A <div> element should work fine.
<div class="index1" alt="alt" title="title" ></div>
And the CSS:
.index1 {
width:258px;
height:300px;
background:url(Images/index.png) 0px 0px;
}
Related
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'm trying to display a local background-image in CSS. It's in the same folder as index.html and it's not displaying.
.image {
width:100px;
background-image: url('PIC1.jpg');
}
Any help is appreciated.
It is not appearing because you didn't give any height to the div see this http://jsfiddle.net/ce1j6k7k/2/ you can remove the height to see the difference
HTML
<div id="image"></div>
CSS
#image{
width:300px;
height:300px;
background-image:url('http://placekitten.com/300/301');
}
Resources specified in CSS are resolved relative to the path of the CSS file, not the page referencing the CSS file. PIC1.jpg must be located in the same directory/folder as the CSS file itself.
There is no way in CSS to do what you think it does - and that's a good thing, because I can't think of any possible use-case. Imagine having these pages all referencing style.css:
/index.html
/products/fish.html
/user/account/orderHistory
...if style.css referenced "foo.jpg" then foo.jpg would have to be replicated at /foo.jpg, /products/foo.jpg and /user/account/foo.jpg.
I can think of 3 possible problems.
First, the image path. for example if this is your image's real path:
D:\Projects\MyProject\Content\Images\PIC1.jpg
you should do this in your code:
background-image: url('~\Content\Images\PIC1.jpg');
Second, is that the width that you've set in the code doesn't match the image's coordinates. In that case, you can either change the code or re-size the image.
And finally, the image might not be loaded on the page and by refreshing it few times it might be shown.
I have made a div as follows:
<div class="fbook" style=" border:thin; border:1px solid black; float: right; margin-top:50px; margin-right:5px">
<img src="facebook.jpg"></img>
</div>
The facebook.jpg file is placed in the same folder as that of the html file. But still the image appears to be broken in the browser. I guess the browser cannot locate the image path. Can anyone please help me resolve this issue. The image is as follows:
Image is a self closing tag:
<img src="facebook.jpg" />
Double check that you spelled it correctly (and used correct capitalization, the file type is .jpg and not .png or .gif etc.). Another thing you could try to do is use the full url:
<img src="http://www.example.com/facebook.jpg" />
And just some other comments...
You are missing a semi-colon after margin-right:5px and you can condense margin-top and margin-right into shorthand
margin:50px 5px 0 0;
or
margin:50px 5px;
if you want the 50px margin on both top and bottom, and you want the 5px margin on both left and right.
Try this instead:
<div class="fbook" style="border:1px solid black; float: right; margin-top:50px; margin-right:5px">
<img src="./facebook.jpg" />
</div>
I changed the path to "./" which means it's relative to where to document is and I also made the img tag self-closing. It doesn't have an end tag like a div does.
This works perfectly ok. I tried putting an image instead of facebook.jpg.
So the question comes ... why are u getting the broken image?
** Please stop using the closing tag its not required.
Probable Answers:
Either the path to the image is wrong, but you mentioned the image is present in the same folder, so this can't be the case.
It seems you have deployed your website on a server, and accordingly you have uploaded the image to their server. I had the same problem few years back.What you can try is:
i) I tried using file manager. You must be having two file managers in the control panel,
try using the other one, as it seems the image is getting corrupted during upload.
ii) Check in the file manager whether the image uploaded is fine on the server, its not broken.
iii) Else create a proper images named folder and place the image inside it and give the appropriate path.
Any of this would definitely solve your problem.
Cheers!!!
i check it but all things are correct, img tag doesn't need close tag you can use this form:
and you can use width and height for image tag.
I am trying to set my background image of the page via CSS using the following code, but no image shows up. The image will be tiled on the page and is only 10x10px big. Nonetheless, it still doesn't show up. Please can you tell me what I am doing wrong?
<body>
<div id="background"></div>
</body>
#background {
background-image: url("img/background.png");
}
Is the image in linkToCssFolder/img/background.png? The image path is relative to your CSS file.
Also, does your #background div have content in it? If not, it will probably have the default 0px height, and not show any background.
You need to give the element dimensions too...
#background {
width: 10px;
height: 10px;
}
Background images do not make their container stretch to fit.
Here is a list of all CSS keywords
Just tried this at http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple and it works.
I assume your image is not at right location or if the background property is being over written by style or another css rule.
such a no brainer thingy of css and html often forgotten even professional due lack of proper focus and just being tired.If you knew it just rest for a while.
here are some tips if you lost in the tree of web design.
Check the files if it is there, the file type and support for the file in your browsers
Check the directory if you are online you can put all the URL of the file OR use "../" if your css and the image file is in different level of directory.
Check your syntax.
rest, take a nap or have a coffee break.
Firstly check your CSS and image location
1) Both in same folder then try " background-image: url("background.jpg") " simply.
2) If you have img folder and image inside this folder then try " background-image: url("img/background.jpg"); "
3)If you have img folder and If you have CSS folder then you have to go one step back then goes to image folder and choose image it seem like this " background-image: url("../img/background.jpg"); " where '..'represent one step back
#background {background-image: url("img/background.png"); height:300px;}
add height element in css
Another source of error may come from image extension name, for instance in :
background-image: url("img/background.png")
Image name must be "background" and NOT "background.png"
Image "background" must be a PNG and not another image type like JPG
Hy,
to get your image you must imagine that you are in a terminal(or cmd prompt) and write as youuld do to get to the image.
So let us say that your css file is /css/ and you image is in /img/background.png.
To get to the image you must write this code background-image: url("../img/background.png");
This is because in terminal/cmd prompt to get to the image from your .css file you would first type cd .., then cd img, then background.png. Hope it will help you!
Cheers!