Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
When using the background-image I notice that it will not work with images from a direction web page link, like this:
body {
background-image: url("http://www.example.comenter/2312.jpg");
}
But if I link it directly from a folder directory it works just fine like such:
body {
background-image: url("C://Users/Jane/Desktop/2312.jpg");
}
Why is does it not work with an url link?
It works fine with a URL link:
body {
background-image: url("http://via.placeholder.com/400x200");
}
Actually It works, however you should review if the link is available.
The background-image property specifies an image to use as the background of an element.
Just check the link that your are specifying in url may be that path does not consist any image or please check image path that you want to display in webpage.
body {
background-image: url('http://www.publicdomainpictures.net/pictures/130000/velka/pink-simple-background.jpg');
}
<html>
<head>
</head>
<body>
<h1 style="color:white">Hello World</h1>
</body>
</html>
You can use like this:
body{
background: url('http://www.example.comenter/2312.jpg');
}
If it is not works the following link does not have any image, try another image.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 10 months ago.
Improve this question
I'm new to HTML coding, and I seem to be having problems with the <img> tag. My code, which I type in VS Code, is linked up to a Github repo, which is linked to Netlify which I use as the host for the site.
I'm trying to get an image into the <main> section of the code, but I just always get the alternative text for the image.
<img src="tratt_1080x1080.jpg" alt="lot182" class=".floatRight">
That's the code for the image.
.floatRight {
float: right;
width: 300px;
max-width:50%;
margin-left: 10px;
margin-bottom: 10px;
}
That's the CSS code for the class floatRight.
the result on the actual site
Your image and files should be in the same folder.
Also you don't need to use "." in your tag. Remove "."
In css we use a . to indicate that the following name is a class. So in html we don't need that name, because we already specify that it's a class. (remove the dot in the class atribute).
<img src="tratt_1080x1080.jpg" alt="lot182" class="floatRight">
There can multiple reasons of it why it is happening, but make sure you have you have spelled your image file correct in the img tag tally it with care even be careful about the extension of the image its '.jpg' or 'jpeg'.
Second make sure your image is place at the correct place location. According to your img tag it must be placed in the same folder as your html file is placed
Third correct your class attribute don't place a dot with it here, you should place it to access this class in CSS file with a dot not where you are defining it in the html tag
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
With this application, I'm having some imaging issues in terms of getting the background image to appear behind the login form. I'm currently using a bootstrap template in order to make this site. I tried posting the background image using the .main-content div to no avail.
<div>
<style>
.main-content {
background-image: url('../../../../wwwroot/images/MacbookBackground.jpg');
}
</style>
</div>
https://github.com/zhadjah9559/HelpDeskTicket/tree/3.LoginAndDB
You can add your <style> in your _Layout.cshtml and your url should be /images/MacbookBackground.jpg , like below.
Your _Layout.cshtml head:
<head>
//...
<style>
.main-content {
background-image: url('/images/MacbookBackground.jpg');
}
</style>
</head>
Then in your view:
<div class="main-content">
<h1 class="display-4">Welcome</h1>
</div>
Result:
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have an image inside a link like this:
<img src="img/post.png">
all I want is the image to change to "post_light.png" when user places mouse hover link. Any idea which is the easier way to do this?
Pure HTML
<img src="img/post.png" onmouseover="this.src='img/post_light.png'" onmouseout="this.src='img/post.png'">
You have already asked this. Please do not ask twice, instead edit your first question if needed.
With only HTML and CSS, it is not posible to change the source of image. If you change the IMG tag to a DIV tag, then you can change the image that is set as the background.
div {
background: url('http://www.placehold.it/100x100/fff');
}
div:hover {
background: url('http://www.placehold.it/100x100/000001');
}
Be aware of the possible SEO and screen reader complications that can arise from this.
You can do something like this:
<a class="switch-image" href="start_post_job.php">
<img class="main-img" src="img/post.png">
<img class="caption-img" src="img/post-light.png">
</a>
The styling:
.main-img{
z-index; // This might not be required
}
.caption-img{
z-index:10;
display:none;
}
.swith-image:hover > .caption-img{
display:inline-block; // either this or block
}
.swith-image:hover > .main-img{
display:none;
}
This should switch the images. Just you play around with it, I think you should beable to do this just by changing the display property of the two or just by changing the z-index.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
You may find it hard to believe but I've been trying to figure out why this won't work for hours and if anyone could show me what I'm doing wrong, I'd be most appreciative.
On a page of my site I have a list of navigational links but I don't want the "Home" link to appear while on the home page so I assigned it a class and set this class to not show the link but it's not working.
Here's what I have for the link
<li><a href='http://classifieds.your-adrenaline-fix.com/' class='homelink'>Classifieds Home</a></li>
and just before the closing head tag of the index.php page I have;
<style type="text/css">.homelink { display:none; }</style>
yet, The link is appearing. If anyone could kindly show me how to make this work properly I'd be most appreciative and I thank you in advance.
Try seeing if its a specificity conflict by instead using the !important keyword
.homelink {
display: none !important;
}
Or add it as an inline style:
<li>Classifieds Home</li>
you should use
display: none !important;
i think there is another class or "a" tag in css
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Okay, so this question could hardly be more basic, but... Why does this CSS rule not pick up the image inside the table?
# HTML
<table id="support-people"><tr><td>
<img src="http://news.bbcimg.co.uk/img/1_0_1/cream/hi/news/news-blocks.gif" /></td>
</tr></table>
# CSS
#support-people img {
width: 50px;
}
JSFiddle to show that the CSS is not being applied: http://jsfiddle.net/96F8H/
And if anyone can recommend me some kind of in-browser tool to pick up this kind of thing, bonus points...
It works fine. The problem was you had your CSS rule in the Javascript field. Here's a link with the things in the correct fields: http://jsfiddle.net/Skooljester/zHvx9/.
Your CSS is in the JavaScript box in your demo. Here's a corrected version.
If the example in the question is your actual code, you'll need to wrap the CSS with style tags:
<style type="text/css">
#support-people img { width: 50px; }
</style>
Mostly because you put the CSS in the Javascript part of JSFiddle.
Here's the working version with the CSS moved to the CSS section of the page: http://jsfiddle.net/96F8H/2/
It works fine. You put the css in the javascript section:
http://jsfiddle.net/96F8H/1/