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");
Related
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 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 can see my menubar when I preview webpage in browser but I cannot see it in Dreamweaver design view?
Here is my code incase there is a mistake
CSS;
#bar {
margin-top:5%;
background:url("/Users/Macbook/Desktop/test website/images/bar.png") no-repeat center;
height:50px;
background-size:100% 100%;
}
HTML;
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="Untitled-3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="bar">
</div>
</body>
</html>
Thankyou for your help.
i think your image path is not good
when you work for web,
attempts to your organization like this
-root folder
----img folder
----css folder
----js folder
etc, etc (it's just an exemple)
in your case try this
-root folder
index.html
----img (contain bar.png)
----css (contain Untitled-3.css)
dont forget to replace path in html for css :
<link href="css/Untitled-3.css" rel="stylesheet" type="text/css">
and of course in css :
background:url("../img/bar.png") no-repeat center;
try this : )
Whenever you begin a URL with a slash, it's essentially an absolute path. It says "start at the domain root and go from there".
I can't explain why it's working in the browser but not in Dreamweaver - but if you change the path to images/bar.png or even try /images/bar.png, it should start working again.
my css is in assets/css/style.css and my image is in assets/img/bg.png But when i try to link the background image:
background: url(../img/bg.png);
it instead uses assets/css/../img/bg.png as the url. Why is it?
Html file (/index.html)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" media="screen" href="assets/css/style.css" />
</head>
<body>
<h1>Background Image</h1>
</body>
</html>
Css file (/assets/css/style.css)
body{
background:url(../img/bg.jpg);
}
For mac OS you should use this :
body {
background: url(../../img/bg.png);
}
you can use this
body{
background-image: url('../img/bg.png');
}
I tried this on my project where I need to set the background image of a div so I used this and it worked!
I had a similar problem but solved changing the direction of the slash sign:
For some reason when Atom copies Paths from the project folder it does so like background-image: url(img\image.jpg\)instead of (img/image.jpeg)
While i can see it's not the case for OP may be useful for other people (I just wasted half the morning wondering why my stylesheet wasn´t loading)
Since you are providing a relative pathway to the image, the image location is looked for from the location in which you have the css file. So if you have the image in a different location to the css file you could either try giving the absolute URL(pathway starting from the root folder) or give the relative file location path. In your case since img and css are in the folder assets to move from location of css file to the img file, you can use '..' operator to refer that the browser has to move 1 folder back and then follow the pathway you have after the '..' operator.
This is basically how relative pathway works and you can use it to access resoures in different folders. Hope it helps.
body
{
background-image: url('../images/bg.jpeg');
}
You are using cache system.. you can modify the original file and clear cache to show updates
You are using a relative path. You should use the absolute path, url(/assets/css/style.css).
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.