I have an local folder with my index.html file in it. It also contains a css folder containing mystyle.css and an images folder containing all of my images. I'm trying to create a background image but it won't display. Can anyone see why?
My css is working correctly and below is what I have in my css:
/*CUSTOM*/
body {
background-image:url('..\images\red_curtain.jpg');
}
Here is my HTML:
<head>
<link rel="stylesheet" type="text/css" href="css\mystyle.css" />
<meta http-equiv="content-type" content="text/php; charset=utf-8" />
Try using forward slashes instead of back slashes in your CSS like so:
background-image:url('../images/red_curtain.jpg');
Related
My CSS file somehow not loaded when i clicked my html file directly in my folder. But somehow with vscode when go live after compiling the scss to css it works fine.
do you guys have any idea why?
I place my css file in dist folder when using the Live Sass Compiler.
I tried open the html directly from folder using all the browser i have but the css not loaded.
body {
background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/dist/test.css">
</head>
<body>
<h1> TEST </h1>
</body>
</html>
Because you use absolute path, you should use relative path
instead of /dist/test.csstry dist/test.css
If you want to read more, here is an article about absolute/relative path:
https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
The preview work on vscode because vscode probably use a localserver to run your html file. something like localhost:3000/index.html. So in this case your html file is at the root of the domain, that's why the absolute path will be the same as the relative path
You can try this
<link rel="stylesheet" type="text/css" href="/dist/test.css"/>
you can try ./dist/test.css, this will also works fine
Instead of having to copy the css file over and over again when making a new subdirectory with a html file in it, I would like to have one css file that applies to all html files. How would I do this? I am managing my files through StackCP. My css file is in my public_html folder.
You can use a relative file path to link to your CSS file from other directories. Check out relative path to CSS file for more details on how to accomplish this.
Place
<link rel="stylesheet" type="text/css" href="https://example.com/stylesheet.css">
in your header.
Well, the way you do this is:
Step 1: Create your main.css (It shouldn't necessarily be main.css any name would work like style.css) file anywhere you want but it should be inside the public_html folder.
Step 2: Create your HTML files and include the link/path/URL of the CSS file in your head section of each HTML file. To do this you use the link tag
<link rel="stylesheet" href="main.css" />
The rel attribute in the link tag defines what type of file it is in your case you can put stylesheet and the href attribute defines the link/path/URL to your CSS file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!-- Content of the page -->
</body>
</html>
In the end, your HTML file should something like this.
I hope It helps.
When I open the html file in chrome or IE, the background color and font size doesn't change and I don't know why.
Is it the way I linked to the css file from the html ? Is the path wrong? Should I use / instead of \ in the path name? Is the css content of the css file ok?
This is the head section of my html document (notepad):
<head>
<meta charset="UTF-8">
<title>Final Project</title>
<link rel="stylesheet" href="/CSS3/css/styles"/>
</head>
This is the content of my .css document (I'm using notepad):
h1{
background:#B3B3B3;
font-size:150%;
}
My css file is located here --> C:\Users\m529759\OneDrive for Business\Desktop\Web Design Course\CSS3\css
My html file is located here--> C:\Users\m529759\OneDrive for Business\Desktop\Web Design Course\CSS3\html
Since you are using external CSS:
HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Final Project</title>
<link rel="stylesheet" href="/home/bhavya/Desktop
/styles.css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
Content of styles.css document
body {
background-color: powderblue;
}
h1{
background:#B3B3B3;
font-size:150%;
}
So the reultant output will be:
Update 1:
I think there is some syntactic error in the path which you are using C:\Users\m529759\OneDrive for Business\Desktop\Web Design Course\CSS3\css
DO CHECK YOUR PATH AGAIN, AND DONT FORGET TO SAVE YOUR CSS FILE WITH .css extension AND YOUR HTML FILE WITH .html extension
I had a folder with 2 folders in them. One named html and the other css. I fixed this by deleting the html folder and putting the html document in the folder, like this:
revised file path
I also changed the <head> link in the html file, like this: <link rel="stylesheet" href="css/style.css"> and it worked.
I am trying to link my CSS and HTML. My CSS file is in static folder where as index file in templates folder.
code : Header of index.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI App</title>
<link href="C:\Users\Shweta\MFRTPPython\static\main.css" rel="stylesheet" type="text/css">
</head>
Even after providing it's proper path, I am unable to link them.
Try using below way, it is almost similar of what you've used but you need to know how to locate the external file.
If you have a file in a location which is outside from the project folder then you can try something like this:
<link href="file:///C:\Users\Shweta\MFRTPPython\static\main.css" rel="stylesheet" type="text/css">
OR
if you know about how absolute and relative path works then below is what you can try:
<link rel="stylesheet" type="text/css" href="./yourDirectory/yourFile.css"
My advice to you is to create a folder in your project and add that stylesheet file into that folder and refer that path in the html.
Kindly go through this path for better understanding of absolute and relativepath.
I'm trying to make a web site in code, and I added an image to the page: <img src"../img/image.png">. When I load the page in a browser I get a square box, and it says it could not load image.
I have tried it in Windows 10 and Kubuntu 18.04 - same error. I get the same error when I make a CSS file. If I put the image in the root folder it works. Any ideas?
Should be
<img src="../img/image.png">. You are missing the =
did not work here the top of my html page same error only way it works it I put ../WebSite/img for the folder . But when I ftp the page no logo or background . But the files are there
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../css/Main.css" />
</head>
<body>
<img src="../img/Logo.png">
</body>
</html>
I created the assets folder, that folder include the images folder then i paste the png type image (bill.png) in image directory.
Here is the code with image path
<img src="{{ asset('assets/images/bill.png') }}" class="center-block">
Important thing
assets folder in public directory
Put the image in the same folder as the webpage is and try to change source to that image name.
OR
Try clearing your browser cache data if you want image to be loaded from assests folder.