I have a stylesheet defined in the index.html as
<link rel="stylesheet" type="text/css" href="css/template.css">
Inside the template.css, I have declared
body{
background-image: url(images/background.png);
background-repeat: repeat;
}
Why is the image not getting displayed? The path is correct
The path in the CSS should be relative to where the CSS file is located, not from where the page where the CSS file is being loaded from.
Try:
background-image: url(../images/background.png);
When you are starting out, this can seem counter intuitive, but it's actually a good design as your CSS file can then be called from any page in any folder and the references to the images will not be broken.
Related
I have an index.html and style.css. I currently use the inline css but I want to use a stylesheet. I have this code in my index.html just before my </head> tag.
<link rel="stylesheet" href="/style.css">
and then i have this in my style.css
body {
background-color: yellow;
}
note both of those files are located in public_html. But whenever I open the index.html the background stays white and does not change to yellow.
how can i link the style.css to index.html ?
You need to give your CSS at least a height and width.
Try adding:
height: 100%;
width: 100%;
If you're working locally, the /style.css reference will try to load the file from the root of your filesystem. Same thing applies if you're loading from a subfolder in a domain, it will try to look for the file at the root of the domain folder.
If you change it to <link rel="stylesheet" href="style.css"> (notice the missing slash) it will then try to find the style.css file in the folder relative to the index.html file, which is the same.
The background will then be yellow.
The main thing is you need to have relative file path to your stylesheet.In your case imagining you have style.css inside css folder you need to do
<link rel="stylesheet" href="style.css">
Remember / path is for absolute path of file. This means that it
represents your file path from the root directory. And without / the file path becomes relative
Since you said you were beginner this may be another issue. Maybe be you haven't specified where to apply your style
body{
background-color:yellow;
}
Try adding
height:1000px;
width:100%;
You cannot give percentage to body height because body has no parent.
And add
<link rel="stylesheet" href="style.css">
to <head> of html file.
If your html page has nothing in it (text or images) then it is difficult to see any bg color since it has no height/width, as mentioned above.
Insert some dummy text to see if this is the case.
If you only have one css file, it is not unusual to have it in the same folder as the index.html file, and in this case change the code to:
This may be the case since you indicate that both files are in the same root folder, so delete the "/" since that would mean the css is not being applied.
It is worth naming the stylesheet to something relevent to the site you are working on, such as catstyle.css or lollipopstyle.css so that, if you have many css files open in your text editor, you can clearly see which one is for which site.
I am assuming also that you have the skeletal structure of the html "bare bones" complete as shown here.
Make sure to put the link to the stylesheet inside the section, say, after the meta-charset line.
my required image filepath is xampp1/htdocs/projecto/images/bgs.jpg
my css filepath is xampp1/htdocs/projecto/css/sp.css
my css code is:
body
{ margin-top:100px;
background-color:linen;
background-image:url("/projecto/images/bgs.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
this is how i have linked it in my html file:
<head>
<link rel="stylesheet" type="text/css" href="/projecto/css/sp.css">
but my background image does not show up...
Try to go up one level from the css folder with ../ instead of referencing directly to the project folder. Try the code below and see if it helps
background-image:url("../images/bgs.jpg");
To link up an image from another folder outside of your project then it needs to be back from your project folder.For that, there use two dots that means you can access the file outside of your project.And then you show the directory of your folder.Example of your project are
background-image:url("../images/bgs.jpg");
Thank you.
I have the following reference to my css stylesheet:
<link rel="stylesheet" type="text/css" href='#routes.Assets.versioned("stylesheets/main.css")' media="screen" />
The stylesheet is located at /public/stylesheets/main.css.
And has this content:
body {
background-image: #routes.Assets.versioned("images/deer.jpg");
}
I'm not getting any errors, but no image appears in the background.
Am I doing something wrong?
Public resources (assets) are not processing by the template engine, so
body {
background-image: #routes.Assets.versioned("images/deer.jpg");
}
never processed.
Here is the similar question:
Can you reference images from css without using relative paths?
Solutions
Use the static path
body {
background: url("/assets/images/deer.jpg");
}
The /assets part depends on your routes setting, /assets is a default.
Write CSS in the template file, so it would be one that returns but your controller (not one in the public folder)
Guys this is my folder structure
Project
index.php
css
style.css
js
javascript.js
image
background.jpeg
style.css
body{
background-image: url("image\background.jpeg");
}
index.php
<html>
<head>
<title>Todo Application</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id = "header">
hiuiiiii
</div>
</body>
</html>
So guys tell me where am i wrong such that i can correct it so that my background image is displayed.
I believe this is the issue.
Incorrect - url("image\background.jpeg");
Correct - url("../image/background.jpg");
../ - This means one directory up to give the image location, as in your case, it is inside image directory.
Hope this helps.
It should look like this:
body {
background-image: url("../image/background.jpeg"); }
That is a really common mistake, even with me. You need the double dots to go back one folder, since your stylesheet is inside the css folder and your background is inside the images folder.
Also, once you get that fixed, you could perfectly align it in the back using
background-size: cover;
.. and with the prefixes, it would look like this.
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
I hope this answers your question.
URLs in CSS are relative to the directory containing the CSS file. Were your file in the root directory, your URL would be correct. However, as its in a "sibling" directory to the image you wish to use, you'll need to add / or ../ to it. Also, URLs on the web always use forward slashes / rather than backslashes \.
body{
background-image:url("/image/background.jpeg");
}
body{
background-image:url("../image/background.jpeg");
}
Try like this:
background:url("../images/background.jpg") no-repeat;
or
background-image:url("../images/background.jpg");
use ../ before folder name
Ok I got same problem when i try your problem it locally. But now, i make it works like.
CSS:
body{
background: url("../image/background.jpg");
}
HTML:
<head>
<title>Todo Application</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id = "header">
hiuiiiii
</div>
</body>
</html>
Hope it helps.
Hope this could help :url("../image/background.jpg");
I recently purchased a licence for the program, however anytime I put in a background image into the CSS (also the same with SASS), nothing seems to work.
HTML:
<html>
<head>
<title>Does Sublime Text 2 CSS Work?</title>
<link rel="stylesheet" type="text/css" href="/css/stylesheet.css">
<body>
<h1>Hello World!</h1>
</body>
</html>
CSS:
body {
background-image:url('/img/background.jpg');
background-size:cover;
}
I assume your path to your image should be:
background-image : url('../img/background.jpg');
This is why your image doesn't show up, you need to get to the root of your folder then enter the "img" folder to get to the image.
Also, if your folder is made like this:
MAINFOLDER:
index.html
css:
stylesheet.css
img:
background.jpg
your path to your stylesheet should be:
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
My guess is the image is not in the right relative path to the style sheet. If your CSS file is in a folder off your web root such as http://example.com/css/site.css, then the browser is going to look for the background image at http://example.com/css/bg-img.jpg ... which would be a pretty odd place to put it.
Try putting the full path to the file in your css...something like this:
body{
background-image: url('/background.jpg');
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
(And make sure thatbackground.jpg actually lives in /images/, of course!)