Image not displaying in html, but displaying in browser - html

I have an image with URL
http://nba2kcontest.com/fantasy/img/player.png
It is visible when I directly go to this URL, but not when I use html img tag it is not displaying:
<img src="http://nba2kcontest.com/fantasy/img/player.png">
I don't know what is the problem because the permission is also 0777
Edit
I don't know what but when I replace the picture player.png with player.svg it works!

Give the below a shot, maybe you have a background color set on a parent container that is making your png not visible.
.img-container{
background:#fff;
padding:10px
}
<div class="img-container">
<img src="http://nba2kcontest.com/fantasy/img/player.png">
</div>

Related

how to put background image path from remote web site?

I need grab images from Imgur to My web page background image
<div style="background-image:url(); width:100%; height:100%;" class="zoom" >
My image path is https://imgur.com/a/NbUpX
then how can I put this image to my background image url?
You need to copy the right image path: https://i.imgur.com/QdMWFHZ.jpg
Go to https://imgur.com/a/NbUpX -> right click on image -> Copy image address
After this you need to put it into background-image:url('https://i.imgur.com/QdMWFHZ.jpg');
Here you can find some documentation for background-image using.
Remember to set an height for your div, because in your solution will be 100% of nothing so this can be a solution:
<div style="background-image:url('https://i.imgur.com/QdMWFHZ.jpg'); width:100%; height:200px; background-size: contain; background-repeat: no-repeat;" class="zoom" >
Update image url like this
<div style="background-image:url('https://i.imgur.com/QdMWFHZ.jpg'); background-repeat:no-repeat; width:100%; height:100%;" class="zoom" >
Open your image path, after that right click on the image and click "Copy image address".
And then paste address on your code.
<div style="background-image:url(https://i.imgur.com/QdMWFHZ.jpg); width:100%; height:100%;" class="zoom" >
or in your CSS directly as background-image: url("https://i.imgur.com/QdMWFHZ.jpg")
since you need background of webpage it would be part of the body attribute like (CSS):
body {
background-image: url("https://i.imgur.com/QdMWFHZ.jpg")
}
You can test it here

Img src VS CSS Background Image No Intrinsic Dimensions

I've got a markdown with HTML built inside and I need to change the following:
<img src="..." />
Into
<img class="image" /> // Could also be a div, doesn't matter
And give it a background-image CSS style instead (this is due to webpack bundling and the fact I have no imports and variables in .md files)
Problem is that the first option loads the image properly without having to specify height/width, and the 2nd approach shows nothing unless I specify height/width.
Fiddle demonstrating issue
Why is this, and is there a way to bypass this without specifying height/width for every such occurence?
The best you can do is calculate the proportion of the img and then use the value for padding and cover to fit that:
As an example if the image is 1:1 proportion:
.image {
background-image: url('http://i.imgur.com/3Zh2iqf.jpg');
background-repeat: no-repeat;
background-size:cover;
padding-top:100%;
}
<div>
<div class="image">
</div>
</div>

Auto adjust my background image size

I've been googling for awhile and none of the answers seem to match my need, need someone to help me with this, thanks.
my personal website is: http://simonykhsu.com for refrences
my code for the background image is
<div class="landing-header" style="background-image: url('skitrip_owlshead.jpg');">
i've tried implementing this background image code but i cant find the section in css file to make the background go skin color
<div id="image-container">
<img id="image" src="skitrip_owlshead.jpg" alt="middle"/>
</div>
and also the second code above doesnt seem to bring my image to the middle...
for centering the image and set backgroud color you can do this in the image-container div
<div id="image-container" style="text-align:center; background-color:#ccc;">
<img id="image" src="skitrip_owlshead.jpg" alt="middle"/>
</div>
#ccc is a sample color ... you set with your color code..
I'm sorry, but I don't really understand what it is that you're trying to accomplish.
Couple of heads-ups tho:
its better to create a seperate CSS file, instead of using inline-styling. Make a file called style.css and put your CSS in that. Put this in the <head> section of your website:
<link rel="stylesheet" href="style.css" type="text/css">
The alt="middle" is the alt-text. It's not used for styling
(centering) your image, but to describe your image. Something like
"skiteam owlshead team" should be good.
If you want to center the image and put 'skin color' right and left to it, put this in your style.css:
#image-container {
background-color: #FFFCF5;
}
#image-container img {
text-align:center;
}

Make the header image fit the container, nothing seems to work

Nothing seems to be working for me. But what I would like to do is make the header image fit to the size I'd like, which is the container. Heres the actual page link: this.
And heres the jsFiddle here: http://jsfiddle.net/Zorabelle/f7DRh/.
I think this is what I have to fix but I just don't know.
/*HEADER IMAGE DETAILS - HEADER MUST BE 921PX WIDE*/
.header {
background-image: url(http://media.tumblr.com/aceb30d864925524ee215c0d6f88e1bc/tumblr_inline_mu0br62w4R1s7znag.gif);
background-repeat:no-repeat;
height:200px; /*CHANGE TO THE HEIGHT OF YOUR BANNER*/
}
I want the 'Define the Term' header to fill up that whole space. Help?
Here's a working JSFiddle example: http://jsfiddle.net/f7DRh/2/
You can set the image size to container by specifying:
background-size:100% 100%;
That way it will always keep it within container's width and height.
Reference:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
You can also use the traditional replacing your div
<div class="container">
<div class="header">
</div>
becomes
<div class="upcon">
<img src="http://yourimage.com" style="width:100%" />
</div>
By the way, with this method the browser tries to render the image correctly if the user has a resoltion smaller than what your are asking (1050px). It won't crop it.

How to remove the Border in image sprite

Border is not removing in the below code, which is image sprite . I have tried some methods to remove the border using style and border 0 ,but no use .
<style>
img.home{width:40px;height:32px;
background:url(share.png) 0 0;
border-style: none;}
img.next{width:40px;
height:32px;background:url(share.png) -36px 0;
border-style:none;}
</style>
<a href="http://www.yahoo.com/">
<img class="home" border="0">
</a>
<img class="next" border="0"/>
JSFIDDLE
Images come with a default border, that only disappears when the image is downloaded. That image comes from the src attribute of the image. If no src is set, then the image won't be downloaded, and the border will be forever there - your case exactly.
A normal img tag looks like this:
<img src="/something.jpg" />
yours looks like this:
<img />
You're adding your image through css's background-image. Not as it should be done. You can add a background image, but it's usually for other purposes. (check the aside at the bottom).
Try removing the background image and placing the image location on the src attribute of the image. Like this:
<img class="next" src="/share.png" />
You'll see the image has no border now.
Aside
When a background image is added to an img element, it's usually to provide a placeholder image for when no img src is set. Think of avatars on the comments section of a blog.
Also
When creating a sprite, you can use divs ps ems etc. Remember, the background-image can be applied to any element!
Suppose your html tag is <img class="somthing" /> and in the class "something" you have defined the background position of the image.
As you select a particular image from the image sprite more accurately, a particular position where the image is. Your class is proper where you fetch the image using the background position in css.
A simple solution to remove the border is just make the img tag as a div.
if you fetch the image according to the background position why it is necessary to use a img tag.
Just write the html like ...<div class="next" ..>
you can use a base64 very small transparent image, if you would not use an external file
<img class="next" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
Found it out, JOPLOmacedo was right, but you don't have to remove the background, just use the src tag. JSFIDDLE. (Sorry about the images, but I needed them to test the src)
HTML:
<a href="http://www.yahoo.com/">
<img class="home" src="http://jsfiddle.net/img/logo.png" border="0"/>
</a>
<img class="next" src="http://jsfiddle.net/img/social-icons/facebook_16.png" border="0"/>​
CSS:
img.home{width:40px;height:32px;
border: none; background:url(http://farm1.staticflickr.com/111/315308766_163c08db38.jpg) 0 0;}
img.next{width:40px;
height:32px;
border:none; float: right;
background:url(http://farm1.staticflickr.com/111/315308766_163c08db38.jpg) -36 0;}​