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.
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.
It seems like a very easy task and that's exactly how it is done on some websites with examples but it just does not work for me!
My folder is like this:
project
resources
css
index.css
images
pattern.jpeg
other.jpeg
another.jpeg
index.html
I need to make a background for some text.
CSS:
#company-name{
background-image: url("resources/images/pattern.jpeg");
}
html:
<h1 id="company-name">Dasmoto's Arts & Crafts</h1>
My html can see the picture, i've checked it by putting it in here:
<img src="resources/images/hacksaw.jpeg"/>
just in src"" - and the picture was shown normally as it is supposed to.
Also just to check if CSS can understand my ID from HTML - instead of backbround-image - I chenged the color and it did work so ID is fine.
Remember your CSS and HTML are accessing the image from different positions in the project. The index.html and the resources folder are on the same level so can be reached using the path you've provided.
In order to locate the image from the css, you'll either need to begin your search from the root like so:
background-image: url('/resources/images/pattern.jpeg');
or begin by coming out of the css directory like so:
background-image: url('../images/pattern.jpeg');
I have an issue that all beginners in CSS seems to have, my background-image doesn't show.
When I try to put background-color it works, and with image nothing shows-up.
I have put my image in the same folder than my files css and html.
I want to set the image as the background of my <body>.
I use the framework meteor.
Here is the code HTML:
<body>
<div class="Units" id="UnitsSelector">
{{>units}}
</div>
<h1>Test </h1>
</body>
Here is a part of the CSS file:
body {
display: block;
width: 900px;
margin: auto;
color: black;
background-image:url('space.jpg');
}
Also when I use the inspect tool on my browser and I try to open my url I have this error :
Oops, looks like there's no route on the client or the server for url: "http://localhost:3000/space.jpg."
The best approach I see here, is similar to these question:
How to serve static content (images, fonts etc.) using iron router
Although you haven't stated that you're using iron router. The answer will be the same.
Instead of doing all this, you can just put the files under your public directory. If you add the file:
app/public/images/space.jpg
You can access it from your templates like:
<img src="/images/space.jpg">
No routes are needed to make that work.
Beware of overlooking the lead slash.
<img src="images/space.jpg">
The above example will work from your top level routes.
Open devtools in Chrome
Click to "console"
You can see error space.jpg not found
See link on error to your image
Search difference between link in error and real place your image (solution 1)
If all good - play with width/heigh/background-position (solution 2)
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);">
This sounds very backwards, but I want to take existing CSS classes and make them inline in the element itself (The css styles and the html elements are in the same file). There is a reason for this, for which I will not go into detail.
Example:
<html>
<style type="text/css">
.p1 { height: 10px; }
</style>
<body>
<p class="p1">...</p> <!-- Remove class="p1" and replace with style="height: 10px;" -->
<p class="p1">...</p>
<p class="p1">...</p>
</body>
</html>
Keep in mind there can be many CSS classes, and many can belong to a single element.
Edit: The reason I'm doing this is because (based on our client) we want to generate PDF documents from an HTML template. The PDF tool we use does not work well with external CSS classes.
You are looking for Premailer (The source available as well) - it is a Ruby library that does just that (inlines CSS for HTML email - but the output isn't specific to HTML email - it should work just fine with your PDF document generator as well).
There is also lamson.html.HtmlMail if you are using Python and there are a variety of Node.js libraries available to do the same thing.
MailChimp has a page for this in their labs, the CSS Inliner -
http://beaker.mailchimp.com/inline-css
It does leave the class, however.