Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm starting to build a webpage using Bootstrap 3 (latest version) and for some reason I can't seem to add a background image.
The coding is correct, all files are in their proper folders, etc.
Finally I decided to create another webpage with the exact coding the only difference is that my css stylesheet is not in the css folder. I refresh and the background image appears. When i move the css file back into the css folder, the image is gone.
What is happening? the name of the file is correct, I have added the correct path and I added some other styling besides the background image and they seem to be working perfectly whether or not the css file is in or out of the folder.
HTML WHERE CSS FILE IS IN THE CSS FOLDER
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<!--Bootstrap css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!--Custom css -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
</html>
HTML WHERE CSS FILE IS NOT IN THE CSS FOLDER
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<!--Bootstrap css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!--Custom css -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
CSS:
body {
background: url(background.jpg) no-repeat center center;
}
.container {
color: black;
font-weight: bold;
font-size: 2em;
}
Root FOlder
If you move the css file to the css folder the image url in the css file should be changed too. If your css file is in the css folder and image is in the root directory then the image url should be
background: url(../background.jpg)
Means go up one folder and search for image.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
how can i link css in a html template?
Please help me, i can't figure it out, why the code don't function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<link rel="stylesheet" href="test.css">
</body>
</html>
Check if your css file exist in the same folder your html file. and put the link in the <head> or you could do your stying inside HTML but for good practices ALWAYS put your style files away from HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- <link rel="stylesheet" href="test.css">-->
<!--<style>
/*or you could put test.css style*/
</style>-->
</body>
</html>
There are a few ways to incorporate CSS to your HTML template.
1. Inline CSS: In this method you add a style attribute to your HTML tag, in your HTML template's code.
For example:
<h1 style="font-size:20px; color: blue;">Hello World</h1>
2. Internal CSS: Using internal CSS, you can incorporate styling in the HTML's head section using the style tag.
For example:
<style>
h1 {
font-size:20px;
color: blue;
}
</style>
3. External CSS: This is probably what you are looking for. In your folder, add an external sheet i.e. a "styles.css" file. You can add all your CSS styling in this file just as you would add in between the style tag in the head section.
While using this method, the most important thing to do is linking your CSS file to your HTML file by adding the following line of code to your head section:
<link rel="stylesheet" href="style.css">
And that should do it!
I have my layout.html file in the 'templates' directory and my styles.css file in the 'static' directory. Both are in my project folder named 'books-cs50w'. does not work though. I ve probably read all the google-able posts on absolute and relative paths, but for some reason my css is not applied to my layout.html. I had it at the bottom and and at the top of my bootstrap-stylesheets to make sure it's not a matter of being overwritten. To test the actual CSS, I pasted the code directly in -tags inside the layout.html file - it works. But no matter what I do when it's external - it won't read it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384- Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" rel="stylesheet">
<link href="/static/styles.css" rel="stylesheet" >
</head>
The CSS to test it is:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
h1, h2 {
color: red;
background-color: green;
}
body, head {background-color: green;
color: yellow;
}
enter image description here
You need to go one level up from your current templates folder by prepending ../ to your css path and now that you're one level up and currently in the main books-cs50w project folder, you can just navigate to your static folder and access the css file.
Change this line:
<link href="/static/styles.css" rel="stylesheet" >
To this:
<link href="../static/styles.css" rel="stylesheet" >
I am struggling with linking my css file to my HTML code. After looking at other people's issues I have tried renaming it stylesheet, move it into different directories and references from the root. I have commented out the bootstrap link, just to make sure if it is the stylesheet that is linking or if it was a stylistic order of preference, which it is not.
I just entered some random text into the body and tried manipulating it with color and font just to see if the css was linking which it is not. Any other advice about directory structure etc is also much appreciated.
The styling did work if I referenced style directly via style="..." in the HTML code. The bootstrap references also worked, its just this one file which doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" type="text/css" href="../static/css_bootstrap/bootstrap.css">-->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
<link rel="stylesheet" type=text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
...
</body>
</html>
In custom.css, to see if anything changes, even when specifically targeted it doesn't work
* {
color: blue;
font-family: "Helvetica Neue";
}
an image of the directory structure:
Missing double quote in :
type=text/css"
Replace it by
type="text/css"
I think it should work
By the way, the type is not required when you are calling your css file.
<!DOCTYPE html>
<html>
<head>
<title>StopUnderThinking</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../static/custom.css">
<script src="../static/js_bootstrap/bootstrap.min.js"></script>
</head>
<body>
You had not added type="text/css" correctly
...
type=text/css"
This is the problem. Mising this " (opaning double quote)
replace
<link rel="stylesheet" type="text/css" href="../static/custom.css">
I am very new to html and css. I am trying to include an image in a project.
The html file has the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> AirTable GUI For Arcade </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
<h1> GUI Test </h1>
</header>
<img src="full_recycle_bin-512.png"/>
</body>
</html>
The image file full_recycle_bin-512.png is in the same folder as the html file itself so I shouldn't have to use the full path for the image but, even with the full path, the image won't appear. When I run the project with ngrok, I only get the broken image icon. Any help is appreciated!
I suggest you to right click on the broken image and copy the image address, so that you can know if the image path is correct.
I'm looking to start coding in Atom and I am having trouble getting things started. I can't seem to connect my style.scss to the index.html. This is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel"stylesheet" type="text/css" href="style.min.css">
<title>Document</title>
</head>
<body>
<h1>This is a square</h1>
<div class="square"></div>
</body>
</html>
and this is what I have in my style.scss which when complied makes style.min.css
//Variables
$lightblue: #b8fdfb;
//CSS
.square {
width: 100px;
height: 100px;
background-color: $lightblue;
}
This is all that shows up in my local server
You cannot attach SASS to HTML. You first need to compile it first to CSS & then link it to your HTML using <link> tag in the header. Like:
<link rel="stylesheet/css" type="text/css" href="style.min.css" />
You need a preprocessor to convert SASS into CSS. You can use many tools such as Webpack, Prepros, etc.
Have a look at this reference. Hope this helps!