I would like to insert the image that I downloaded instead of using url, how could I do? I've this code:
<div class="..." style="background-image:url=(http://www.example.com);"></div>
I would like to declare the image, like this: assets/image/pic.jpg
I've tried to does:
<div class="..." style="background-image:src="assets/image/pic.jpg"></div>
But doesn't work!
It's possible?
The correct syntax would be:
<div class="..." style='background-image: url("assets/image/pic.jpg")'></div>
Assuming that the path is correct, this should work. For more information please check out the MDN documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
According to w3c's documentation, no, you can't use any other than URL to specify background-image's source
background-image: url|none|initial|inherit;
You should remove the = symbol next to url in your url=(http://www.example.com) and it should work.
<div class="background" style="height:400px; width:400px;background-image: url('http://lorempixel.com/400/400/cats/')">
</div>
in the css divert url and at the end of the instruction use the;
Try with
<div class="..." style="background-image:url(assets/image/pic.jpg);"></div>
Related
I am playing around with HTML and I am trying to add and image but when I run it the it does not show.
Here Is what I have
I am very new to HTML so don't judge...
Please check the spelling of the src property. you typed "SCR". please change that to src and it will work. <img src="IMG_0901.jpg">
check you img tag
it should be <img src="IMG_0901.jpg"> not <img scr="IMG_0901.jpg">
your code has typo error "scr" attributes
Ok. I can't figure this out. Here's the HTML:
<html>
<body>
<img source="sample.jpg" alt="Wheres my image" style="width:100;height:38">
</body>
</html>
Pretty simple. The picture is just a simple block with some text in it. It's 2k in size. And for some reason I can't attach it here.
Both the image and the HTML are in the same sub directory in my Documents folder (Win10 x64 pro).
When I load the HTML, I just get the text from the "alt" setting for the image.
Browsers I'm testing on:
Chrome: 60.0.3112.113 (Official Build) (64-bit);
IE: Version 11.540.15063.0;
Edge: 40.15063.0.0, EdgeHTML version: 15.15063
Any ideas?
Try using this
<img src="sample.jpg" alt="Wheres my image" style="width:100;height:38">
You are using source insted of src that is causing error so change that. I hope this will work.
Change "source=" to "src=" other than that it should work.
Look here for more...
https://www.w3schools.com/html/html_images.asp
In your style add a unit to the width and height like 'px'. Then replace attribute source to src :)
<html>
<body>
<img src="sample.jpg" alt="Wheres my image" style="width:100px;height:38px">
</body>
</html>
The problem is that you have used the attribute source instead of src for your <img> tag.
Rewrite your image tag as:
<img src="sample.jpg" alt="Wheres my image" style="width:100;height:38">
If the image still won't load for you, there are three possible reasons why this may be happening:
You have forgotten to upload the image to the server.Check it's actually accessible by manually navigating to it.
You have referenced the file incorrectly, either by name or by path.
You need to clear your cache.Hold CTRL and click the refresh icon to clear your image cache.
I am a beginner in HTML and was trying to run a code to display image in chrome browser using "textedit" (Mac).
<!doctype html>
<html>
<head>
</head>
<body>
<h1> Image addition </h1>
<p> <img src=“/Users/aman.kumar/Desktop/HTML/HTMLImage/aman.jpg”> </p>
</body>
</html>
However the image is not being displayed. attaching the screenshot of image in browser. Please helpenter image description here
I tested your code and caugth the error where you are doing mistake. You need to change double quotes to "" instead of ““ for src attribute.
Correct Syntax:
<img src="/Users/aman.kumar/Desktop/HTML/HTMLImage/aman.jpg">
Just copy this syntax from here and paste in your html page. you will get output.
You need to put a URI scheme at the beginning like file:// to tell the web browser to look on the hard drive instead of requesting the image from the internet.
So the img src should look like
<img src="file:///Users/aman.kumar/Desktop/HTML/HTMLImage/aman.jpg">
Just replace the qoutations you used in the img src
“ ”
with
" "
Please remove the fancy quotes use this.
<img src="file:///Users/aman.kumar/Desktop/HTML/HTMLImage/aman.jpg" alt="aman image">
enter image description hereThank you all for your comments, I tried each and every suggestions but didn't work. But accidentally tried the below mentioned code it worked.
Is it because of the gaps in /HTML Image/ and since the gaps have been filled with %20 it worked.
What could be the reason for same?
I've started using Bootstrap for a project, and in particular, the Thumbnails component. On the thumbnails example on the documentation, the following sample code is shown:
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img data-src="holder.js/300x200" alt="">
</a>
</li>
...
</ul>
Notice the use of data-src to replace the usual src attribute on the <img> tag.
I assumed that to get my thumbnails working, I should use data-src instead of src for the images, but that does not seem to be the case. I've only been able to load images by defining the src attribute. It seems others are having the same problem.
Is this a typo in the documentation, or did I not understand correctly how to use data-src?
I believe that the only reason of why bootstrap guys are using data-src instead src, it's because of holder.js. You should use src instead of data-src because data-src is only used for the javascript library that generates the example images of a certain size, and src is the normal attribute for specifying the location of an image (Source: W3C)
Why are they using in the documentation data-src? I suppose that even the syntax <img src="holder.js/100x200"></img> is accepted by the library as it is in the holder.js documentation, when we access to the page it throws a 404 error in the image even when the image is displaying, because there is not any file in the specified path, what it's weird.
Why do they put that in the documentation code? I really don't know. Probably it's a mistake. But I am sure that you should use src instead data-src in thumbnails.
How to use it
Include holder.js in your HTML:
<script src="holder.js"></script>
Holder will then process all images with a specific src attribute, like this one:
<img src="holder.js/200x300">
The above tag will render as a placeholder 200 pixels wide and 300 pixels tall.
To avoid console 404 errors, you can use data-src instead of src.
Holder also includes support for themes, to help placeholders blend in with your layout. There are 6 default themes: sky, vine, lava, gray, industrial, and social. You can use them like this:
<img src="holder.js/200x300/industrial">
Bootstrap uses Holder for thumbnails in its documentation.
It's pretty well explained on the Holder github page.
Include holder.js in your HTML. Holder will then process all images with a specific src attribute... The tag will render as a placeholder. To avoid console 404 errors, you can use data-src instead of src.
In order for me to get this to work, I had to call the run() function in holder.
I am using require to load backbone views, inside my view I include holder
var Holder = require('holderjs');
Then inside render I can run
Holder.run();
And in my template I have
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img data-src="holder.js/200x200/text:hello world">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
Hope that helps.
I couldn't figure it out either, as far as I understand it holder.js is actually a completely separate js file to act as an img placeholder from http://imsky.github.io/holder/
data-src is used to pass to the javascript, the /100x200 is the dimension of the picture you want the javascript 'holder.js' to take up for the real img.
I think the idea is to prototype using this (data-src="holder.js/300x200") and then replace it with sized pictures (src="Logo.png") afterwards.
For future Googlers looking for how to use with NPM/build jobs this worked in my case:
window.Holder = require('holderjs').default;
Solved it: I forgot to escape the quotes.
I am trying to change a div's background image using Django tags, but I am having problems:
<div class="inner" style="background-image: url("{{ dogs.0.id }}.jpg");">
The tag that displays the dog's ID correctly because I use it elsewhere and it displays the right information. Am I using style correctly?
Edit: For some reason, it removes all of the slashes from my URL. So https://www.something.com/dog.jpg becomes https: www.something.com dog.jpg
Yes, but offcourse the image needs to exist in the current path you are in since you are using relative url's. Plus you need to set a width and a height for the . Use firebug or Chrome inspector to see if it works and polish up your HTML/CSS knowledge ;)
Edit: For some reason, it removes all of the slashes from my URL. So
https://www.something.com/dog.jpg becomes https: www.something.com dog.jpg
you can use "safe" filter to avoid this if your dogs.0.id is https://www.something.com/dog
code like this:
<div class="inner" style="background-image: url("{{ dog.0.id | safe }}.jpg");">
Try the following to dispaly background image in your template in style you need to use following code for inline-css.
<div class="inner" style="background-image: url({% static "image-path/background.jpg" %}");>