My image is saved in the same folder tree or whatever that is called as my webpage, and it won't load. It's probably something really simple but I can't figure it out. Any hint would be appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>website</title>
<style type="text/css" media="screen, print, projection">
body{
background-image:url('C:\Users\blah\Desktop\webdesign\randompicture.png');
}
</style>
</head>
<body>
</body>
</html>
instead of C:\Users\blah\Desktop\webdesign\randompicture.png'
use relative path if your htm file is in webdesign folder randompicture.png
use background-image: url(randompicture.png);
if the html file is on desktop
use background-image: url('./webdesign/randompicture.png');
Try using relative paths, if your picture is in the same directory as your html file, simply write:
background-image: url(randompicture.png);
Also, you don't need apostrophes in the url() notation of CSS.
If you put your rules into a separate CSS file, the path should be relative to the CSS file, not the HTML.
if the image is in the same folder, use:
body
{
background-image: url('randompicture.png');
}
Related
I try to use jpg files for the background in my project but I can't do this via .css files.
First of all - it seems all settings are right, since the setting from the HTML file works fine:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Home page</title>
</head>
<style>
body {
background-image: url("img/mainpage.jpg");
}
</style>
...
And when I include my CSS file and use background-color, it also works fine:
main.css:
body {
background-color: #193340;
}
But not for background-image. Even when I use both options, only color option is applied:
main.css:
body {
background-color: #193340;
background-image: url("img/mainpage.jpg");
}
how to correctly set the image file exactly in .css file?
Pretty sure you are not refering to image path right inside the main.css file.
background-image: url("img/mainpage.jpg");
Try to write down correct relative path to your image.
if let's say your file structure is like this
index.html
img/mainpage.jpg
css/main.css
then correct way to your refer to image file will be
background-image: url("../img/mainpage.jpg")
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 new to html and I tried to create my webpage with the html as follows
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h1> My web page </h1>
</body>
</html>
And the following css
h1{
color: red;
}
I tried adding a class to the h1 and styling it that way but in vain. If i do the css in style tags inside my html file it works but i want to have it in a main.css file
I want the h1 to have the color red, also I would want the css in a separate file, no the same one as my html so that it will be clean
If I am not mistaken you did not link your css file to the index.html, try something like this
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
<link rel="stylesheet" type="text/css" href="./main.css">.
</head>
<body>
<h1> My web page </h1>
</body>
</html>
But try to replace ./main.css with the actual path of your main.css reffer to this for more info.
In the head section you have to link the html file to your css file.
Place the following code within <head> tags:
<link rel="stylesheet" href="[the path to your CSS file]">
It is usually this tag
<link rel="stylesheet" href="yourfilename.css">
But I think the problem you might be facing is the path of your css. Where is your css file located if it is inside a folder like a style folder then you would do something like this.
<link rel="stylesheet" href="style/yourfilename.css">
You need to import the css in the HTML file
I can see my menubar when I preview webpage in browser but I cannot see it in Dreamweaver design view?
Here is my code incase there is a mistake
CSS;
#bar {
margin-top:5%;
background:url("/Users/Macbook/Desktop/test website/images/bar.png") no-repeat center;
height:50px;
background-size:100% 100%;
}
HTML;
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="Untitled-3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="bar">
</div>
</body>
</html>
Thankyou for your help.
i think your image path is not good
when you work for web,
attempts to your organization like this
-root folder
----img folder
----css folder
----js folder
etc, etc (it's just an exemple)
in your case try this
-root folder
index.html
----img (contain bar.png)
----css (contain Untitled-3.css)
dont forget to replace path in html for css :
<link href="css/Untitled-3.css" rel="stylesheet" type="text/css">
and of course in css :
background:url("../img/bar.png") no-repeat center;
try this : )
Whenever you begin a URL with a slash, it's essentially an absolute path. It says "start at the domain root and go from there".
I can't explain why it's working in the browser but not in Dreamweaver - but if you change the path to images/bar.png or even try /images/bar.png, it should start working again.
By some curse i cannot for the life of me get this simple css call working. here is my html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css" />
<title>Welcome.</title>
</head>
<body>
<br>
</body>
</html>
here is my stylesheet:
body {
background-image:url(img/landscape.jpg');
}
the file is named correctly. when i assign a background-color tag to this stylesheet, i get the color for whatever i assigned. is there some rule that keeps the body from having an image background? This is absolutely incredible. HOW is this not working for me?
You need to make the path relative to your css. Since you have your css in a folder named "css" and your images in a folder named "images", you must tell the path to move out of the css folder and into the images folder.
body {
background-image:url('../img/landscape.jpg');
}
You're missing the opening quote in your URL:
body {
background-image:url('img/landscape.jpg');
}
This should definitely work, provided, as you say, the file is named correctly and is in the location you say it is.
Assuming it's not a copy-paste error, your CSS is invalid, as you're missing a matching ':
background-image: url('img/landscape.jpg');
Apart from this, you should check that the URI is correct and that the image is accessible.
And as a side note, your XHTML is invalid as well. Stick to HTML4.01/5 or write valid XHTML (and serve it as aaplication/xhtml+xml).