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");
Related
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 have a web page with the following folder structure:
MyWebpage
- css
- layout.css
- img
- wallpaper.jpg
- js
- index.html
I have the following line included in index.html
<link rel="stylesheet" type="text/css" href="css/layout.css">
Now, I want to use the image wallpaper.jpg as the background for the <body> element. How can I use relative referencing here? Should I locate the file relative to the CSS file, like this,
body {
background: url('../img/wallpaper.jpg');
}
or relative to the HTML file, like this?
body {
background: url('img/wallpaper.jpg');
}
It really depends on where you are writing your CSS.
If you are writing an inline style or using <head> <style> tags in the HTML file, then use a path relative to the HTML file (../ in this case), as you are telling browser to load the image from the HTML file.
And if you are writing the style in the CSS file, the style is relative to the CSS file destination (no ../ in this case), as you will load the CSS file from the HTML file and the CSS file will load all the required resources.
I'm using Spring MVC and the Thymeleaf view engine. I have an external style.css file with the CSS for my page. In the CSS file, I want to refer to a relative image URL.
This is my style.css file:
.background {
width: 100%;
background-image: url('/path/to/image/bg.png');
}
The above tries to access an image with the following URL, which doesn't exist:
http://localhost/path/to/image/bg.png
My real image is at:
http://localhost/myapp/path/to/image/bg.png
This StackOverflow question gives the answer to my question for inline CSS: How to set background url for css files in thymeleaf?
But how do I do this for an external .css file?
Put all your images folder structure with images path/to/image/bg.png inside the images folder under resources/static. Then refer to it in CSS as:
.background {
width: 100%;
background-image: url('../images/path/to/image/bg.png');
}
And then you can use this CSS in your templates as:
<head>
<link rel="stylesheet" media="screen" th:href="#{/css/application.css}"/>
</head>
Your files structure should look like this:
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');
}
So what I have is two css's.
style.css
signup.css
I created a folder called css and placed signup.css in the css folder.
signup.css is a copy of style.css just placed in the CSS folder.
Here is the css code that contains the images:
#body{
width:683px; margin:0 auto; padding:0 0 60px 0;
background:url(images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}
When I reloaded the webpage the images broke, so I changed the code to be:
#body{
width:683px; margin:0 auto; padding:0 0 60px 0;
background:url(../images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}
However the images still won't load. How do I adjust the css so the images load with the style.css placed under the css folder?
In response to a question:
head
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
title>
link href="css/signup.css" rel="stylesheet" type="text/css" />
/head>
Set a basehref tag in your HTML head:
<base href="http://example.org/image_base_path/" />
All requests without a protocol will get this URL prepended.
background:url(images/header_bg.gif) will get loaded as http://example.org/image_base_path/images/header_bg.gif
Try using
background:url(/images/header_bg.gif)
Assuming the path to your images folder relative to your domain is /images
I'm not sure I follow your changes exactly, however I'm assuming you started with something like this:
(HTML):
<head>
...
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
...
</head>
with files and directories:
index.html
style.css
images/
images/header_bg.gif
and it was working properly. Then if you added the following directory and file:
css/
css/signup.css
and changed the HTML head to read:
<link rel="stylesheet" type="text/css" href="css/signup.css" media="screen" />
and in css/signup.css you changed
background: url(images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}
to:
background: url(../images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}
and all the files are world-readable (or readable by the web server user) then you things should work properly. Make sure that your css directory is world-executable and the css file is world-readable. You can verify whether your css file is readable by opening it directly in your browser, ie:
http://www.mysite.com/css/signup.css
If you get a 404 error, then the css file can't be read by the web server.
If you prefer you can also use an absolute path in your css file to point to the image, for example:
background: url(/images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}
(assuming the images folder is located at the root folder on your website).