css background image in a different folder from css - html

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

Related

How to correctly plug CSS into HTML with absolute path to make picture from CSS working?

It might sound silly, but I am trying to understand this.
When I plugged CSS with absolute path - picture/fonts are not loading (404).
I test a page on the built-in WebStorm server (2022.3) through Chrome browser.
[i just heard absolute paths are better, that is why]
What did I miss?
Here is an example:
file structure
css-pract[root]/
-folder/
--css/
---styles.css
--img/
---some.jpg
-index.html
index.html
<!doctype html>
<html lang="ru">
<head>
<link rel="stylesheet" href="/folder/css/styles.css">
</head>
<body>
<div class="has-bg"></div>
</body>
</html>
styles.css
.has-bg {
background: url("/folder/img/some.jpg");
}
It works when I do relative: <link rel="stylesheet" href="css/styles.css">
Also, the <img> from index.html are loaded with absolute paths, so I was expecting it to work from css also.
I've tied to replicate your folder structure and both relative and absolute paths worked for me.
You need to give the div with class "has-bg" a height, however, in order to see the background image. Perhaps you forgot to do this for the absolute paths?
Relative paths
in index.html:
<link rel="stylesheet" href="./folder/css/styles.css" />
in styles.css:
background: url("../img/some.jpg");
Absolute paths
in index.html:
<link rel="stylesheet" href="/folder/css/styles.css" />
in styles.css:
background: url("/folder/img/some.jpg");
Actually /folder/css/styles.css also is kinda a relative path. If you are using Windows, some full absolute path should be something like: C:/Folder/image.jpg.
You're doing this just for studies purpose? If yes, I don't think you need to be worry about this.
If you're gonna deploy it in some server, then you gonna have a full absolute path looking something like: https://website.com/images/image.jpg and then you can correctly use the absolute path as something like BASE_PATH/image/image.jpg where BASE_PATH is some variable with the full website link.
Another approach is to set the base in the <head> of your html like this
<base href="https://www.example.com/">
Then all relative url's in your page will be preceded with this url.
folder/img/some.jpg
will become
https://www.example.com/folder/img/some.jpg

Why is my HTML file not reading my CSS file?

I'm creating a website.My .html file is not linking to my .css file.
HTML:
<!DOCTYPE html>
<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="404.css">
<title>Pacebi - 404</title>
</head>
<body>
body text here
</body>
</html>
CSS:
body{
font-family:'Montserrat';
background-color:whitesmoke;
color:black;
}
button{
font-family:'Montserrat';
background-color:whitesmoke;
color:black;
}
Note that I've done the exact same thing to my other pages. This is specifically not working.
Could it be the fact this is a 404 page in any way?
Using an online web programming tool (replit.com). (OS would not affect. If it did, I've been editing from a Windows 10 and Android 11.
Update: It's working now, I cleared browser cache and put the path for 404.html in the same directory as my .css.
i think your linked it wrong, well that is the only reason why it would not be connected
Your code is correct. It's working fine on my side.
Yes. I'd change the name to something still relevant and see if the issue persists.
I checked with your code. It was working fine on my side. Could be a cache issue. Empty your browser cache and refresh it. It should work fine then.
It is not linking because your css body code should be the html file code and if that doesn't work I think your file name should be style.css cuz 404 is a interactive code for windows to follow your file path.
It does not matter if your file is named 404.css or 503.css, it has to be in the same folder as your html file in your case.
That said, it seems your CSS is ill-formed or badly copy/pasted.
You miss the tag name for which you are defining the first styles. i guess it's the body
MISSING_SELECTOR {
font-family:'Montserrat';
background-color:whitesmoke;
color:black;
}
button{
font-family:'Montserrat';
background-color:whitesmoke;
color:black;
}
Also you can add the type but that does not matter much:
<link rel="stylesheet" type="text/css" href="404.css" />
Browsers HTML parsers are quite robust to the fact they don't really need the HEAD and BODY tags in order to know where to place the objects.
Nevertheless try to put all your links and metas inside the head if you are using it.
Good luck! :)
I tried the code on replit.com and it worked fine for me:
The only reasons why I think it might not have worked on your computer is if you named the file incorrectly, or if you put the css in a different folder.
Suppose you did it like this, then it would not work because the file path would be incorrect:
The second reason is if you put the css in a different folder, so the file path would be wrong:

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.

CSS background selectors not applying in html

Let me preface with I am a terrible coder and am learning how for school. I have a basic site referencing an external CSS. All other portions of the CSS work except for the background portion. I have tried moving the background image to different folders and trying different file types and I still get nothing. I've been trying to figure this out for hours now and I'm going nuts.
CSS
body {
background: url('blackboard.gif');
color:white
}
.auto-style1 {
text-align: center;
font-family: "NACHOS & TV";
font-size: 55pt;
}
Markup
<head>
<link href="CSS/RESTAURANT.css" rel="stylesheet" type="text/css" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RESTAURANT NAME</title>
<meta content="RESTAURANT NAME Home Page" name="description" />
</head>
Normally the url is relative to the css file but if you have trouble, the best is to use a navigator with a developper-tools menu like Chrome (or firebug in Firefox).
With this, you can figure the exact URL used to get this image and fix it.
check the url() value in your css background property,
if you have the dir structure as:
site/
css/
restaurant.css
img/
blackboard.gif
index.html
you should use:
background-image: url('../img/blackboard.gif');
so the css renderer will "up" one level directory (because ../) and search for the img folder.
Hope it works
I finally figured it out using https://jigsaw.w3.org/css-validator/. The problem was I had a at the top of my CSS. I am not sure how it got there and I know I did not initially post that, I though it was irrelevant. I apologize and thank you all for the help!
Please try this this should work
body {
background-image: url("your image name");
}
Thank you

creating html pages in eclipse

I want to call a css from my index.html, and the css is in a CSS folder, also there is an image in a images folder..
I have tried different ways but no luck
The directory looks like this
My_First_Website
Javascript Resources
WebContent
css
mystyles.css
images
mybackgroundImage.png
index.html
Now mystyles.css looks like this
#CHARSET "ISO-8859-1";
body
{
background-image:url('/WebContent/images/mybackgroundimage.png');
}
And my HTML page looks this
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="/WebContent/css/mystyles.css" media="screen" />
<title>My Website</title>
</head>
<body>
</body>
</html>
Right now the page shows empty :(. Please help :)
In your background image and your stylesheet reference, you're using absolute paths (paths that begin with the forward slash). On a website, an absolute path instructs the browser to go looking for a resource at the root.
So let's imagine I have a website with the following structure:
index.html
css/
screen.css
images/
main-back.png
project/
sample.html
And I'm adding the following HTML to project/sample.html:
<img src="/images/main-back.png" />
To find the image, the browser will first go to the root directory, then look for the images directory, and then look for main-back.png. Alternatively, you can use relative paths:
<img src="images/main-back.png" />
Without the forward slash, the browser will start in the project directory (where sample.html is located) and look in vain for an images folder. This will result in no image displaying. To fix it, we tell the browser to first navigate up a directory:
<img src="../images/main-back.png" />
This is basically the same thing as our first example, except we're using a relative path instead of an absolute path.
Now, the problem you are facing is that you're opening the page up on your own computer. In this case, there is no root web directory, so you'll need to use relative paths instead of absolute paths. So, for your stylesheet reference, you can use:
<link rel="stylesheet" type="text/css" href="css/mystyles.css" media="screen" />
Start from index.html, look for the css directory in the same directory, and then find mystyles.css within that directory.
For your CSS image reference, the key thing to remember is that paths within CSS files are relative to the CSS file itself. So you'll need the following:
background-image:url('../images/mybackgroundimage.png');
Start from mystyles.css, move up a directory, look for the images directory, and then find mybackgroundimage.png in that directory.
Change /WebContent/css/mystyles.css in your HTML file to /css/mystyles.css, and change /WebContent/images/mybackgroundimage.png in your CSS file to ../images/mybackgroundimage.png.
/WebContent under WebContent means My_First_Website/WebContent/WebContent, not My_First_Website/WebContent.
You're using absolute paths (paths starting with a '/'). Using relative paths might help.
This works:
<img src="../images/picture.png" width="40%"/>
when you have:
WebContent/ and in the subdirectories:
html/index.html
images/picture.png
For me this worked:
.helpbg {
background-image:url('../resources/images/aboutbg.jpg');
}
And the element, which is in a JSF and Bootstrap project:
<div class="container-fluid helpbg">