So, I have two files one is for html and the other one is for CSS
I made the connection between them like this:
<link rel="stylesheet" type="text/css" href="CSS/login.css">
here is my html code, i just started so there is'n much code
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="CSS/login.css">
</head>
<body >
<form>
<div>
</div>
</form>
</body>
and here is the css file
body
{
background-image:url("../Images/header.jpeg");
}
the problem is the background-image is not working
Joe
Please let us know the folder structure or the print screen of the same.
and also let us know is it the localhost or its the server.
It might be because of case you have CSS in capital letter which should be smallcase.
<link rel="stylesheet" type="text/css" href="CSS/login.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
It doesn't work because your body element doesn't have a width or a height.
try this:
body
{
width: 100px;
height: 100px;
background-image:url("../Images/header.jpeg");
}
Of course you don't have to give the body a fixed width and height. Just make sure that there is some content in it.
I believe if you add something between the blank divs your background picture should show.
Try like this: Demo
html
{
background:url("http://www.stockazoo.com/uploads/3/5/4/5/3545172/748777_orig.jpg") no-repeat 100% 100%;
height:100%;
}
Specify height as 100% for html, body along with background size:100%
Well it's because you don't have contents inside your body.
You can either:
Add content to body (Like obviously you would - but incase the issue is on other elements same logic applied)
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="CSS/login.css">
</head>
<body >
<form>
<div>
Background Show
</div>
</form>
</body>
Or Add height and width using css
body {
width: 100px;
height: 100px;
background-image:url("../Images/header.jpeg");
}
Related
I have been using Brackets for a school image and was trying to move div tags next to each other but was experiencing no change in visuals of the code and I wanted to check if there is an issue with the external CSS so I tried to change the background colour to no successes and haven't even been able to change the background colour of a properly set up blank document.
I have been using the following to try to change the colour.
body {
background-color: green;
}
And this is the blank html for the purpose of testing
<!DOCTYPE html>
<html>
<head>
<title>Solitare</title>
<link rel="stylesheet" href="Untitled-2.css" type="tex/css">
</head>
<body>
</body>
</html>
Am I missing something blindingly obvious or is there another issue?
Thank you very much. G. Ward
probably you have a mistake at <link rel="stylesheet" href="Untitled-2.css" type="tex/css"> try this <link rel="stylesheet" href="Untitled-2.css" type="text/css">
body {
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Solitare</title>
<link rel="stylesheet" href="Untitled-2.css" type="text/css">
</head>
<body>
</body>
</html>
Your code is just fine!
you are only missing 1 thing a 'text' instead of 'tex'
<link rel="stylesheet" href="Untitled-2.css" type="tex/css"
should be
<link rel="stylesheet" href="Untitled-2.css" type="text/css"
I'm trying to make a HTML-code but when I try to use 'div' with a class or id it won't do what's written in the class. Only when I write it between the tag (so the when I write width between the tag it works, but not if I wrote it in the class).
.header {
width: 100px;
height: 10px;
background: blue;
}
<!doctype html>
<html>
<head>
<link type="text/css" rel="OIM11 - CSS" href="OIM11 - CSS.css" />
<title></title>
</head>
<body style="background-color:#666666">
<div class="header"></div>
</body>
</html>
Any idea why this doesn't work?
When in doubt, open developer tools on literally any website and look at the way they include stylesheets. I don't know how you came up with that format. This is the proper way:
<link rel="stylesheet" type="text/css" href="path/to/main.css">
Also, avoid spaces when naming files. In your shoes, I would rename the current file to OIM11-CSS.css.
Live Example Up at
http://geovillageva.com/
I have a weird margin problem up top. I have set body margin to 0px, and cannot identify where the margin is coming from using Inspect Element.
HTML of Header
<div id="header">
<img id="logo" src="/image/header.png" alt="GeoVillage Banner" style="width:500px;height:64px;">
</div>
CSS Of Header
body {
margin: 0px;
}
#header{
display:block;
padding: 20px 100px;
background-image: url(/image/headerbackground.png);
background-repeat: repeat-x;
}
If you want the html of the whole page, do inspect element on the webpage. I have coded with PHP and it is extremely messy with all the variables ect.
I see ~=
below body tag and above link to css. Remove that extra.
Don't use margin and padding for body and html, set it in div's
Also delete this symbols https://yadi.sk/d/vq-uOlwZ3CarQV
I think I found the problem. Your html structure is wrong.
currently it is:
<!DOCTYPE html>
<html>
<head>
<title>GeoVillage - A Community</title>
<link rel="stylesheet" href="defaultstyling.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="/image/logo.png">
</head>
<body>
-=<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/navbarstyle.css">
</head>
<body>
but it should be like this:
<!DOCTYPE html>
<html>
<head>
<title>GeoVillage - A Community</title>
<link rel="stylesheet" href="defaultstyling.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="/image/logo.png">
<link rel="stylesheet" href="/navbarstyle.css">
</head>
<body>
Try this and I think it will work.
So I want to set the file wallpaper.png as the backgound of the page, the image is in the same folder with the html and css files.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheethome" href="stylesheethome.css"/>
<title>Prism</title>
</head>
<body>
</body>
</html>
And the css:
body {
background-image: url("wallpaper.png");
}
the problemi is with this-
rel="stylesheethome
change it to--
stylesheet... hope this works..
After changing it is working I tried it.
Your body is empty, that's the same for zero pixel height. You can try like this:
html, body {
height: 100%;
}
Good luck.
Try to set stylesheet for rel in your <link> and check your file names.
<link type="text/css" rel="stylesheet" href="stylesheethome.css" />
Try this. I changed the rel attribute value from stylesheethome to stylesheet.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheethome.css"/>
<title>Prism</title>
</head>
<body>
</body>
</html>
stylesheethome is not a valid rel attribute value.
Hope this helps.
Ok im trying to link my index.html to mystylesheet.css but is isn't working? It works perfectly on CodeAcademy but doesnt seem to work when I run it in chrome. I'm using Notepad++ by the way. When I say isn't working, i mean that the styles in the css aren't coming up, like the background colour for example. here it all is, is there anything im doing wrong?
index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="mystylesheet" href="mystylesheet.css"/>
<title>A$AP World</title>
</head>
<body>
<p>Please agree with the terms&conditions before entering.</p>
</body>
</html>
mystylesheet.css
body {
background-color: black;
}
p{
color:red;
}
img {
display: block;
height: 100px;
width: 300px;
margin: auto;
}
Your rel attribute should be rel="stylesheet":
<link type="text/css" rel="stylesheet" href="mystylesheet.css"/>
SitePoint explains it nicely:
The rel attribute defines the relationship that the linked resource has to the document from which it’s referenced. In most cases, this resource will simply be "stylesheet", which means, not surprisingly, “the referenced document is a style sheet.”
Change the rel attribute value, to be rel="stylesheet"
Change this line
<link type="text/css" rel="mystylesheet" href="mystylesheet.css"/>
to be
<link type="text/css" rel="stylesheet" href="mystylesheet.css"/>
Try:
<link rel="stylesheet" type="text/css" href="mystylesheet.css">
Try this:
rel="stylesheet"
instead of
rel="mystylesheet"
<link rel="stylesheet" href="mystylesheet.css" />
As you're using an HTML5 doctype, you can also leave off the type declaration.