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)
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.
I have a simple html page :
#my_svg{
width: 75px;
height: auto
}
<a href="#">
<div id="my_svg">
<img src="https://svgshare.com/i/MHB.svg" alt="English flag">
</div>
</a>
All I see is English flag so it seems like my svg is not loading. I'm sure about the path because I have the image as png on the same folder and it's working well. Just changing the extension.
The weird part is that I don't have any 404 error in my console. It's working when I add it throught the link https://svgshare.com/i/MHB.svg but when I use the local file it doesn't work. On my side I don't have any webserver and don't want
So your problem is its not working on the local file right? I think it will work if you use <img src="./flag.svg" alt="English Flag'>. That should work, sometimes not adding "./" on the src attribute will have issues because the browser might think it is a web link, not a path link.
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');
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 am trying to add an image as a sign in button to my website's header. When a user clicks/taps the button, it redirects them to the sign in page. I'm creating a ruby on rails app, and my image is located in "app/assets/images", but I can't seem to get my image to appear.
And I do not want to upload the image to a site such as imgur and link it to my site.
Here is what I've tried so far.
Attempting to link with CSS:
1) background-image: url(../images/sign-in.png) no-repeat;
2) background: url(sigin-in.png);
And I've tried getting it to work with display: block; width:128px; height:128px; position: relative;
Attempting to link with HTML:
<a type="button" class="navbar-toggle btn-signin">
<img class="signin-img" scr="../images/sign-in.png">
</a>
Note: I've tried other methods in HTML too, such as creating <button> tags,<div> tags and<a> tags.
It's a ".png" image, does that play a factor for not appearing?
Try changing the src value of your image to ../../assets/images/sign-in.png.
Your full image element should look like this:
<img class="signin-img" src="../../assets/images/sign-in.png">
Here you are mixing backgound-image and background-repeat:
background-image: url(../images/sign-in.png) no-repeat;
this should be:
background: url(../images/sign-in.png) no-repeat;
Also, in some RoR apps, using MVC pattern, the assets are being referenced from the root level of the app, so you might have to change the paths to the files.
probably you could try removing the "../"?
do you have any other images that are being correctly displayed?
good luck!
I solved the issue! I figured it had something to do with rails, since this only happens when I make rails apps/sites.
Since my html file is erb (embedded ruby), I had to "embed" the image in my html like this:
<img src="<%= asset_path( 'sign-in.png' ) %>" />
Thank you to everyone who answered!
First, make sure it's src not scr.
<img class="signin-img" scr="../images/sign-in.png"> # bad
<img class="signin-img" src="../images/sign-in.png"> # good
Second, open up developer tools (https://developer.chrome.com/devtools) and see if the browser is requesting the image:
images/sign-in.png
It will look like this: (make sure you're in the network tab)