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.
Related
I have a problem with setting up a background image. My html below works perfectly when I use a url to a picture online, however I can't use a picture from my computer. Can I use a picture on my computer as my website's background?
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("Downloads/jpic.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<p>first paragraph</p>
</body>
</html>
the problem is with your path you need to specify the path like this if your image is not in the same directory as your project :
'C:\Users\user1\Downloads\jpic.jpg'
try it this way it will work
Yes you may use background-image from your computer. Just put the image(which you want to use) in the same folder in which your coding file is located.
After pasting your image file to the same folder, just use the code below:
background-image: url("jpic.jpg");
Use relative path (without C:\, Documents or whatever) just where the image is from all the other files included in the project. For example if its in the same path it would be:
body {
background-image: url("jpic.jpg");
background-color: #cccccc;
}
And in the images path:
body {
background-image: url("images/jpic.jpg");
background-color: #cccccc;
}
And please avoid inline CSS, import external *.css file
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.
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!)
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.