I'm new to .NET and am trying to transfer some HTML into a ASPX page. I'm building a theme and have a CSS file at the root of theme folder. The images folder is at the root of the theme and the image I want is in that folder. In my web.config, I specified the theme to use. The page is pulling some of the theme, but not the images. In the original HTML, the path to the image was:
url(../images/image.png)
I found this article that said the path should be:
url(images/image.png)
But that doesn't work either. Can someone help? Thanks.
The folder structure is this:
theme
--style.css
--images/
----image.png
From your CSS file, the path should be (I have tested this and it works):
url('images/image.png');
Your HTML/ASPX/Master page head section:
<head>
<title>Untitled Page</title>
<link rel="Stylesheet" href="style.css" type="text/css">
</head>
Example CSS file:
body
{
background-image: url('images/image.jpg');
}
Related
The file structure in my GitHub repo is
--root
index.html
resume.css
--folder assets
resume.css
(yes I made two identical css file just in case one of them works but none of them works...)
I tried to reference css file as
<link rel="stylesheet" type="text/css" href="resume.css" media="all" />
or
<link rel="stylesheet" type="text/css" href="assets/resume.css" media="all" />
But again none of them works..
When I download the entire GitHub repo as a .zip file on my computer and unzippit, the website can display normally.
Is it something else I could do?
The webpage shows on my local file
and webpage on github
Can you check where you placed the <link> tag?
It should be inside the <head> tag
EDIT:
You can move highlighted section in here to parent <head> tag and remove <head> tag inside <div> tag
I'm trying to display an image on the background of a site through CSS. I want the image to be kept in a separate folder than the CSS/HTML file. The image only displays, if I place it in the same folder as the CSS/HTML file, and reference its name only.
The code is in C:\Users\User\Desktop\project\templates and the image is in C:\Users\User\Desktop\project\pictures. If I try using the absolute path it won't display. It will only display if I place the picture in the templates folder.
<!--This code works if I place the picture in the template file-->
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("picture.png");
}
</style>
</head>
</html>
<!--This code doesn't work-->
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("C:\Users\User\Desktop\project\pictures\picture.png");
}
</style>
</head>
</html>
Use this css
Body{
background-image: url("../pictures/picture.png")
}
Based on your folder structure, you might need to do a ../pictures/picture.png
background-image: url("../pcitures/picture.png");
To find the image when it's in the pictures folder. The first '.' means the current directory(.css file), while the second '../' means the parent directory (projects folder). From there, you navigate to pictures folder and then directly link with the picture image. Use this link to learn about file paths. https://en.wikipedia.org/wiki/Path_(computing)
Avoid absolute file path. Imagine transferring your files to a new server, you'll have to rewrite the file path again.
background-image: url("C:\Users\User\Desktop\project\pictures\picture.png");
I have been styling my HTML with inline <style></style> tags in the <head> section. When I tried to move styles to CSS file for the first time from HTML file but, I cannot get my link to work.
I have created a new folder and inside this folder a new HTML file and CSS file are present. I am using VS Code.
I have tried pasting my HTML and my CSS into CodePen and it renders, so I know it's not an issue of the CSS itself not being correct.
My HTML file looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Try this again</title>
<link rel="Hope this works" href="newcssstyle.css" type="text/css">
</head>
<body>
<h1> Here we go </h1>
</body>
</html>
My CSS file looks like:
h1{
font-family: Arial, Helvetica, sans-serif;
color: blue;
}
Why does linking a CSS file not work?
In your example, you only have to change the rel="Hope this works" to rel="stylesheet" in order for it to recognize it as a stylesheet, as demonstrated in the following:
<link rel="stylesheet" href="newcssstyle.css" type="text/css">
Setting the rel attribute value to stylesheet distinguishes the difference between, say, a stylesheet link and an icon image link. You can see all the possible values for the rel attribute on MDN.
Furthermore, if it still doesn't work, ensure that the file "newcssstyle.css" is in the same directory as the referenced HTML file. If you put it in a folder such as "stylesheets", ensure that you add the relative folder path to your HTML file.
For example, if you had a directory like this:
Parent Directory Name:
index.html
Stylesheets:
newcssstyle.css
Then you would reference "newcssstyle.css" (relative to "index.css") as href='Stylesheets/newcssstyle.css'
Whereas, in a directory like this:
Parent Directory Name:
Html_files:
index.html
Stylesheets:
newcssstyle.css
Then you would reference "newcssstyle.css" as href='../Stylesheets/newcssstyle.css' instead (where .. means "go up one level to the parent directory").
element creates relationship between current and external documents.
Important point about i the attribute which stands for relationship. This attribute define how the linked document is related to the current document. How it is read..
Also please make sure your .css file has the same name as Your href.
You can read more about it here -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
I've placed a style sheet style.css inside the /assets/styles-folder and embedded it via <link rel="stylesheet" href="style.css" type="text/css"> in my something.ejs file.
But the stylesheet is not loading. Has anyone an idea?
Use the following to give the correct location of style sheet:
<link rel="stylesheet" href="../../assets/styles/style.css" type="text/css">
The first .. will take it to views folder, the next .. will take it to parent folder Employees, now you can give the path to your stylesheet.
This is because the path must always be relative to current .ejs or some other current file's location in the directory.
Here is my structure within the root folder: css/fonts/ and books/book1.html
Within the css folder I have a stylesheet which has a link to the fonts folder like: src: url('/font/fontName.ttf');
In the books folder, I link the stylesheet through: <link rel="stylesheet" href="../css/stylesheet.css" type="text/css" charset="utf-8">
I have a:
body { color: red } in the stylesheet and all the color was effected as intended. However, for some reason the fonts were not loaded. When I moved the book1.html outside the books folder, and changed the stylesheet link to : <link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8">
Can someone please help ?
If you change the following:
url('/font/fontName.ttf');
To:
url('/css/fonts/fontName.ttf');
It will work no matter where your css file is in the directory structure.
It's hard to fully understand your file/folder structure from your image, but does this work in your css?
src: url('./font/fontName.ttf');
(I added a dot before your forward slash)