I've looked at some other threads on Stack Overflow regarding this problem, but for some reason they don't seem to be working. I've checked things like the path directory for the image, and I think that it's correct.
Here's a link to my repo for the website on github pages: https://github.com/lawrencecheng123/lawrencecheng123.github.io
In my repo there is a "Seattle.jpg" image that I'm trying to set as the background of the first page of my website, which is referenced by the "fstPage" class on line 81 of the "index.html" file and line 321 of the "index.css" file in the repo.
Thank you for the help!
It fails because you named your file wrong. Inside of your index.css, you wanted to use a file named Seattle.JPG.
Your file is named Seattle.jpg. Fix the ending and add https://.
Here's the right link: https://lawrencecheng123.github.io/Seattle.jpg
Complete CSS:
.fstPage {
background-image:url("https://lawrencecheng123.github.io/Seattle.jpg");
/*background-color: lightgray;*/
height: 700px;
width:100%;
background-size:cover;
}
Working snippet:
.fstPage {
background-image:url("https://lawrencecheng123.github.io/Seattle.jpg");
/*background-color: lightgray;*/
height: 700px;
width:100%;
background-size:cover;
}
<div class="fstPage"></div>
first import index.css file in your index.html file like
change (1) :
<link rel="stylesheet" href="index.css">
and then you have to update your class as mentioned below
change(2):
.fstPage {
background-image:url("Seattle.jpg");
/*background-color: lightgray;*/
height: 700px;
width:100%;
background-size:cover;
}
and I hope it will work fine for you also
I was searching for all the forums. But none of which worked for me.
Only workaround for me was to change the order of stylesheets in the head
I mean , if you are using multiple stylesheets, including those from bootstrap cdn with the locally saved one, always keep the local stylesheet on top.
Like this
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
Related
For example I'm trying to set body background color in style.css, but code doesn't work.
My link to Bootstrap 5 and custom CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
This code doesn't work:
body {
background-color: black !important;
}
Only Bootstrap class works for me:
<body class = "bg-black">
I was trying to add !important after background-color but it didn't helped. Similar questions haven't solved my problem yet.
It may be due to error:404 which means browser did not find the specified file.
Add the correct path to solve the issue.
For example if you have a folder 'webfiles' and CSS file in one level and html code is inside 'webfiles', you should use ../
The link will be
../style.css
Note that your link to CSS file should be below all Bootstrap style link.
In my Django project, I attempt connect HTMl to CSS. I have looked online and at other related problems on stack overflow, and still cannot get html and css to link together. I am also a complete newbie to frontend development.
Here's my code (The css file is in the same directory as this file):
<head>
<link rel="stylesheet" href="signup.css" type="text/css">
</head>
<div id="signuptext" class="pb-0"><span>Sign Up</span></div>
CSS:
#signuptext {
font-size: 30px;
}
Error received:
Not Found: /accounts/signup/signup.css
UPDATE: CHANGE PATH(href):
/accounts/templates/users/signup.css
UPDATED CODE:
<link rel="stylesheet" href="{% static 'signup.css' %}" type="text/css">
UPDATED CSS(in main static folder):
#signuptext {
font-size: 30px;
}
I don't understand this error as my css file is in the same folder as the HTML file.
Does anybody know whats wrong? Thank you.
<link rel="stylesheet" href="/accounts/signup/signup.css" type="text/css">
Also, use classes, it is better because you can reuse them. Only use id when you need to use js.
<div class="signuptext" class="pb-0"><span>Sign Up</span></div>
css:
.signuptext {
font-size: 30px;
}
Well i got style.css which it includes in all pages a logo . I'm intrested only to include the logo in one page , so the idea is to edit a copy of Style.css and call it in the script .
Well in pages i got it called like this
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
We have in style.css
.body1 {
background:url(../images/bg_img2.png) no-repeat;
width:262px;
height:397px;
position:absolute;
top:0;
right:6px;
z-index:2;
}
when i delete these lines cause i want to remove the logo , save it as style1.css
and call in the script using this line
<link rel="stylesheet" href="css/style1.css" type="text/css" media="all">
it bugs the pages and deletes all the design , like i have deleted the whole script (like this https://ibb.co/fOsAXz )
i don't think it's needed to upload the whole css , but in request i'll , please help me i'm frozen
What if you just don't include .body1 class to the page you don't wan't to have the logo ?
I'm working on a project using arduino, node.js and socket.io. I am running it in localhost, however my external stylesheet wont load.
The error seems to be saying it cant get my css from this path http://localhost:1337/css/main.css
However if i keep the css in a style tag in the html file it all works fine, is there a way to keep the css external so it doesnt clutter my html file?
Heres how im loading in my css
<link rel="stylesheet" type="text/css" href="css/main.css">
Here is how my file structure looks
Here is my main.css file inside the css folder
my main.css file is within the css folder, i am working off of the interface.html file
Try this instead:
<link rel="stylesheet" type="text/css" href="./css/main.css">
notice the ./ in front of the href
otherwise include full path name:
<link rel="stylesheet" type="text/css" href="http://localhost:1337/css/main.css">
this is what i have tried and it is working for me
<link href="./main.css" rel="stylesheet" type="text/css" />
thanks
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.
The function signature is:
app.use(express.static(__dirname));
Then you can include like bellow
<html>
<link rel="stylesheet" href="/css/style.css">
</html>
The relative path kicks off from your html path so
<link rel="stylesheet" type="text/css" href="main.css">
should work (as your main.css is outside of the css folder). Alternatively, you could put the main.css file on the css folder and reference it with "css/main.css"
I was facing same problem as you are facing but i tired below code and it works.
body{
background-color: yellow;
}
h1{
color: red;
}
p{
color:green;
}
<html>
<head>
<link href="./external.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>This is my First page to test CSS</h1>
<p>The main motive to making this html file is to test my CSS skill.....</p>
</body>
</html>
Thanks,
hope it will help you......
I'm also facing this problem... But I found a solution and its working. Try the below code line:-
<link rel="stylesheet" type="text/css" href="css/main.css?v=<?php echo time(); ?>" />
For anyone else that's having this problem, I was having the same problem and found a solution. My localhost was apparently following a path to a cached CSS stylesheet file, even though it had been overwritten countless times.
Solution: Rather than opening the stylesheet directly from the folder to edit, I had to manually open it from my text editor dropdown menu. After hours of frustration, it was that simple. I use Sublime Text, if it makes any difference, but it seems to be a problem with the localhost, and I suspect clearing the cache would have had the same result.
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!)