CSS
.content {
background-image: url("Pics/GameLogoBackground.jpg");
width: 100%;
height: 600px;
position: absolute;
top: 0px;
left: 0px;
}
HTML
<div class="content" style="display:block;width:100%;height:600px">
I can't see the div background img, please help!
I have tried to solve the problem, with no success.
To reference a class, use the '.' prefix before "content" in the CSS.
So it would become:
.content {
...
}
EDIT:
As you now say the '.' was mistakenly missing from your CSS, some things to try:
Ensure that the file exists in the specified location.
Check that the div isn't behind anything else.
Check if file is present.Go to Your index page and try putting path to image into url. JPG and JPEG are not the same thing
Do not use just background-image , instead of that use for example : https://www.w3schools.com/cssref/css3_pr_background.asp
Also if you are not doing some CSS dark magic there is not reason to put CSS in tag and in style.
I checked Your code and it should be working. Problem is with Your picture. Try to pass more HTML code. There is a chance that some other DIV is covering it
Related
So this is my CSS code:
#plaatje {
background-image: url('Plaatjes\slider_two_temp.jpg');
width: 100%;
height: 600px;
position: absolute;
top: 0px;
left: 0px;
}
And it won't work at all. I placed the picture in the same map as my HTML file.
your code looks fine do a couple of things!
First check whether the id #plaatje is referenced correctly? also check for the path of css and html file
second check the path for your image the path you give in css is relative to your css file you should enter the correct path! if you're not sure about that use absolute path e.g background-image: url('http://localhost/Plaatjes/images/slider_two_temp.jpg'); but beware if you have a large application you might then need to change all the paths for live server!
the last thing you could do is to hit ctrl+f12 for inspect element there you can what actually is wrong with your code!
also check your console by hitting ctrl+f12 many times the issues is that we are not using the correct path for our files which results in File not found error
if none of above works share your html code , css code so we can have a look at it
hope that helps!!!
What you can try is you can enclose your id details in a style tag and you can make id name to any tag like paragraph tag and after that all your code will be alright.
<style>
#plaatje{
background-image: url('Plaatjes/slider_two_temp.jpg');
width: 100%;
height: 600px;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<p id="plaatje"></p>
If you want to try this by
<div id="plaatje"></div>
it will also work fine for div tag
try this i think
#plaatje {
background-image:url('http://investorplace.com/wp-content/uploads/2016/02/google-amazon-goog-amzn-stock-300x200.jpg');
}
https://jsfiddle.net/karanmehta786/rd1yezc2/
i have to load an image inside an anchor tag .
<a> <img calss="imageclass"/></a>
if load like this iam getting border around the image.
I have tried everything like border: 0 and border-style:none but nothing works.
i have one solution, if i use div element instead of img it comes without any border.
please help me how to load this image without border and not using div element.
Try this in your css:
a, img {
border: 0 none;
}
JSFIddle. Here it is
<img src="http://i.imgur.com/PWSOy.jpg" />
Upload your image via css code ... like this
#bgimg { background: url("http://www.staticimages.co/seemeagain/upgrade-sprite.png") -35px -3px;
display:block;width: 25px;height: 25px;float: left;
}
and stop using img tag for uploading background image , use span tag and call your bgimg tag inside there .
I want to add a GIF image to my webpage via CSS, the size of the image should be 100px X 100px.
The file structure is as follows:
Folder:
/index.html
/car.gif
I have added the JSFiddle of the code. Can someone correct it? The GIF is not getting displayed on index.html:
Code
<html>
<head>
<style type="text/css">
#position {
background-image: url('car.gif');
width: 25px;
height: 25px;
position: absolute;
}
</style>
</head>
<body>
dd
<div id="position"></div>
ss
</body>
</html>
The image (car.gif) must reside in the same directory as the CSS if you do not specify an absolute path. For this reason, the JS fiddle is useless. Check to make sure that your files are in the places you suggested they are in.
You also might benefit from a more explicit background statement, such as:
background: url('car.gif') top left no-repeat transparent;
Moreover, if your image's native size is 100px by 100px, you will need to resize it to see it properly:
background-size: 25px 25px;
I updated the other fiddle to include a more relevant version for your question:
http://jsfiddle.net/qtxg2jz5/6/
To answer Astro's comment, I can't comment on posts because I don't have enough reputation yet.
I have tested your code in my browser by replacing an image from my desktop and Image was showing up.
Once just make a change to its width and height :
width: 25px;
height: 25px;
to
width: 100px;
height: 100px;
Also Once Check this...
Ex : If our Page Url is :
www.yoursite.com/css/index.php
make sure car.gif can be accessed if you replace index.php with car.gif,
www.yoursite.com/css/cars.gif
is accessible or not.
Thats nothing but means that that file should be in same folder..
try them and hope you will get results you need..
Make sure the file car.gif is exist at the same directory or use absolute url to the image
DEMO
I can't believe I ran on this problem for the first time. I have searched lot of other similar question on SO regarding the same issue, but none of them worked for me.
I have a img tag with a class attribute under anchor tag.
So my html looks like:
<ul id="racing-menu" class="accordion-menu list-unstyled">
<li>
<a id"something" name class"something">
<img class="icon_71">
</a>
</li>
</ul>
CSS
.icon_71 {
background: url(../../cms/images/sports/something.png) no-repeat;
width: 36px;
height: 22px;
margin: 0 10px 0 0;
float: left;
}
I tried the following solutions in order to avoid default border on Chrome browser
1)border: 0
2)outline: none
3)changing img class to img id
4)Setting
a img {
border:none
}
a img {
border:0
}
Your <img> tag does not have a src attribute since you are setting background with css.
<img class="icon_406">
This is invalid html - if you intend to implement icons through css use <span> or something similar that does not require src attribute by specification. Or load the image icons through src attribute of <img> element.
Chrome displays a border since it cannot find the image (same as if the src had a broken link inside) - but the icon shows since css is still able to apply the class styling to the empty <img> element.
Replace IMG tag width DIV, and it should work :)
Try to replace 'a img' with just 'a'.
Means add the following css:
a img {
border: none;
}
You can also try some bad stuff to test if the border is the problem:
* {
border: none !important;
}
But i don't recommend the second code because it may generate other issues, the second code is just thaught to test if the border is the problem.
You can use <img>, but set the src property to an empty string.
// Get an HTMLImageElement anyway you want.
document.querySelectorAll('img').forEach(function(img) {
// This can also be used to abort an image load.
img.src = '';
});
Tested in Chrome only.
I'm trying to set an input button's image in a jsp. My code for the button is like so:
<input type="button" name="Unassign" class="btnUnassignHandlerRule" style="width:50px;" />
//setting width inline because it's not working in the CSS
And the CSS code is like so:
.btnUnassignHandlerRule{
background: url(../Images/leftarrow.png) no-repeat;
height: 50px;
margin-top: 15px;
}
My file hierarchy looks like this:
jsp: web/WEB-INF/jsp/myJspPage.jsp
Image: web/Images/leftarrow.png
Please let me know if my code if correct and if my paths are correct as well? Otherwise I don't know why it's not working.
Works for me, made a jsfiddle: http://jsfiddle.net/g5zKz/
Could you show the path to the css File ? So we can look if your in the wrong path !
Change ../Images/leftarrow.png to ../../Images/leftarrow.png if the page and image URLs are as described. By the way, in my test, width: 50px works fine even when placed in the same CSS rule as the other settings.
Please use this css.
input.btnUnassignHandlerRule{
background: url(../Images/leftarrow.png) no-repeat;
height: 50px;
margin-top: 15px;
}