CSS image not showing in Sublime Text 2 - html

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!)

Related

How to use background image in css with spring boot?

I try to use jpg files for the background in my project but I can't do this via .css files.
First of all - it seems all settings are right, since the setting from the HTML file works fine:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Home page</title>
</head>
<style>
body {
background-image: url("img/mainpage.jpg");
}
</style>
...
And when I include my CSS file and use background-color, it also works fine:
main.css:
body {
background-color: #193340;
}
But not for background-image. Even when I use both options, only color option is applied:
main.css:
body {
background-color: #193340;
background-image: url("img/mainpage.jpg");
}
how to correctly set the image file exactly in .css file?
Pretty sure you are not refering to image path right inside the main.css file.
background-image: url("img/mainpage.jpg");
Try to write down correct relative path to your image.
if let's say your file structure is like this
index.html
img/mainpage.jpg
css/main.css
then correct way to your refer to image file will be
background-image: url("../img/mainpage.jpg")

Can I use a picture on my computer as my website's background?

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

how to link a css to a html page?

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.

how to get background image present in other folder using css?

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");

css background image in a different folder from css

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).