don't see the image. How can fix error?
enter image description here
Cannot resolve file 'img.jpg'.
This inspection checks unresolved file references in HTML
for inline css you used attribute style in open t
used this code:
<body style="background:url(img.jpg)">
If you are defining the background image with inline styles, it would be written like this:
<body style="background: url(img.jpg);">
Or more specifically, if you only want to change the background image and not unset all other background properties:
<body style="background-image: url(img.jpg);">
Related
I'm new to both HTML and CCS (I've just started yesterday night) and have hit a snag. I'm having some trouble with using the id selector in the div; the background image is failing to appear. Please note that external ccs was used and the image in question exists in a separate folder. Also, the code seen below was made using notepad on my Microsoft computer.
Here's what I've got so far:
#banner {
background-image: url("../img/Sunflower.jpg");
background-repeat: no repeat;
background-size: cover;
}
<link rel="stylesheet" href="css/style.css">
<div id = "banner">
Google Search
<br>
YouTube
<h1>First Web Page</h1>
</div>
There are several things that can go wrong:
In your CSS, you used a relative URL. Usually, Images are transfered over the web via HTTP, so usually, we put relative paths only when we use a bundler for JavaScript/Css. I recommend you change your image path to /img/Sunflower.jpg This will make your web-browser request it at <server_root>/img/Sunflower.jpg
Maybe you didn't include the actual CSS path in the HTML file to make the browser actually fetch it. Please check the <link> tag
The code you've written is generally okay, so the problem is with your actual filesystem / understanding of server paths, so I recommend checking those out.
Here's a working example for you:
#banner {
background-image: url("http://via.placeholder.com/300");
background-repeat: no-repeat;
background-size: cover;
}
<div id="banner">
Google Search
<br>
YouTube
<h1>First Web Page</h1>
</div>
Your code is correct and should work. Please consider the following.
1: Make sure you have the correct path of the image. Your path looks good from here, however, it is still hard to say because we don't know where you have saved the image.
2: Check and be sure that you have linked your CSS to your Html file if using the external CSS, or they are correctly placed in style tag if using internal CSS.
Thank you.
are you using inline css or external css file, or make a separate folder to your media and use that objects by giving simple names like img1.png like that
no-repeat instead of no repeat
please remowe spaces around equation marks - I've never seen anybody formatting the code like that
path to the image is most likely incorrect. Bear in mind ../ means one folder up relative to the css file
did you include your css file in HTML file?
Try add this line on header of HTML file:
<link rel="stylesheet" href="styles.css" />
where "styles.css" is the name of your css file. Check if the css file is in the same folder too.
why do not you set the background image?
There no such attribute for background. You should add it in inline css style. Try inline style like this:
<body style='background-image: url("sfondo.jpg");'>
------
</body>
Refer this for more background options https://www.w3schools.com/cssref/css3_pr_background.asp
Error in line 7:
You need to use <body style="background-image: url('sfondo.jpg')">.
Do remember image location should be on same folder.
You didn't ask the question properly but I think you asking about java web application development related question from eclipse so I want to share some experience with you. If you are using .jsp(index.jsp) file you can use JSTL or without JSTL to set background as below.
<body background="<c:url value='/resources/images/sfondo.jpg' />">
or
<body background="${pageContext.request.contextPath}/resources/images/sfondo.jpg">
note: I used "resources/images/sfondo.jpg" path you can change it as you need
First you should refer about proper project structure(eg. how to organize images, web files, java files etc...). If you are doing java dynamic web application development you can keep image files under WebContent folder. If you are using maven, structure it is difference.
If you are using .html(index.html) file you can use css code inside html file to control background image
<html>
<head>
<style>
body {
background-image: url("sfondo.jpg");
}
</style>
</head>
<body>
or you can use inside body tag too, but I think in some cases it is not working properly.
I know that this question has been asked and answered many times. I have viewed and tested the answers to all of those questions, but still I cant get it working.
I have a div in my HTML Document. I styled it to have a specific height and width. When I give it a background color, I can clearly see it. But If I use background image property, no image is shown.
Here is the HTML :
<body>
<div id="div">
<div id="playButt"></div>
<canvas id="canvas" width="800" height="600"></canvas>
</div>
<script src="Js/Init.js"></script>
<script src="Js/Menu.js"></script>
</body>
And the Css :
#playButt {
position: absolute;
width: 100px;
height: 100px;
display: block;
background-image: url("Imgs/User Interface Icons/PLAY icon normal.png");
}
My document structure is like this :
HTML5\Project FG\Imgs\User Interface Icons\PLAY icon normal.png
The css file is properly linked with the HTML file and resides at the same level of the HTML file inside the folder Project FG.
What is it that I am doing wrong ? How can I correct it ?
Thanks.
Make sure you file name has not white spaces so convert PLAY icon normal.png to something like PLAY_icon_normal.png.
Also make sure that your HTML is pointing to the right file.
You can use the following list as reference when creating your URL:
/ = Root directory
. = This location
.. = Up a directory
./ = Current directory
../ = Parent of current directory
../../ = Two directories backwards
i use body background image different page different background image
Example
<body class="home">
<body class="contact">
but w3 validator error:
"Start tag body seen but an element of the same type was already open." , "Cannot recover after last error. Any further errors will be ignored."
i can use with Jquery
<script>
$('body').addClass("home");
</script>
<script>
$('body').addClass("contact");
</script>
But i want use Html Css no Jquery please help me
All right, you open one element body and then want to open another. One html page must contain one body element. It's a standart.
You are wanting a different background image for EACH page home.html, and contact.html.
home should look like this.
<body class="home">
contact
<body class="contact">
then put the appropriate css with each for different backgrounds
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" %}");>