Maybe a very newbie question.
I have a working site (apache, php, mysql etc) and links everywhere:
<img src="/images/x.gif" />
<link rel="stylesheet" href="/css.css" />
<link rel="stylesheet" href="/js.css" />
in a CSS:
.x { background-image: url('/images/y.gif');
and it all works. But as soon as I put the generate content to a standalone HTML file, to another directory (so it can be viewed, without apache), links gets broken. I know I should loose the / character - but what about CSS? I must change them .x { background-image: url('..images/y.gif'); ? I dont want to this relative tricking, I want absolute
i use this
.x { background-image : url('../images/y.gif');
Change '/ to './
.x { background-image: url('./images/y.gif');
Related
I have an index.html and style.css. I currently use the inline css but I want to use a stylesheet. I have this code in my index.html just before my </head> tag.
<link rel="stylesheet" href="/style.css">
and then i have this in my style.css
body {
background-color: yellow;
}
note both of those files are located in public_html. But whenever I open the index.html the background stays white and does not change to yellow.
how can i link the style.css to index.html ?
You need to give your CSS at least a height and width.
Try adding:
height: 100%;
width: 100%;
If you're working locally, the /style.css reference will try to load the file from the root of your filesystem. Same thing applies if you're loading from a subfolder in a domain, it will try to look for the file at the root of the domain folder.
If you change it to <link rel="stylesheet" href="style.css"> (notice the missing slash) it will then try to find the style.css file in the folder relative to the index.html file, which is the same.
The background will then be yellow.
The main thing is you need to have relative file path to your stylesheet.In your case imagining you have style.css inside css folder you need to do
<link rel="stylesheet" href="style.css">
Remember / path is for absolute path of file. This means that it
represents your file path from the root directory. And without / the file path becomes relative
Since you said you were beginner this may be another issue. Maybe be you haven't specified where to apply your style
body{
background-color:yellow;
}
Try adding
height:1000px;
width:100%;
You cannot give percentage to body height because body has no parent.
And add
<link rel="stylesheet" href="style.css">
to <head> of html file.
If your html page has nothing in it (text or images) then it is difficult to see any bg color since it has no height/width, as mentioned above.
Insert some dummy text to see if this is the case.
If you only have one css file, it is not unusual to have it in the same folder as the index.html file, and in this case change the code to:
This may be the case since you indicate that both files are in the same root folder, so delete the "/" since that would mean the css is not being applied.
It is worth naming the stylesheet to something relevent to the site you are working on, such as catstyle.css or lollipopstyle.css so that, if you have many css files open in your text editor, you can clearly see which one is for which site.
I am assuming also that you have the skeletal structure of the html "bare bones" complete as shown here.
Make sure to put the link to the stylesheet inside the section, say, after the meta-charset line.
Let me preface with I am a terrible coder and am learning how for school. I have a basic site referencing an external CSS. All other portions of the CSS work except for the background portion. I have tried moving the background image to different folders and trying different file types and I still get nothing. I've been trying to figure this out for hours now and I'm going nuts.
CSS
body {
background: url('blackboard.gif');
color:white
}
.auto-style1 {
text-align: center;
font-family: "NACHOS & TV";
font-size: 55pt;
}
Markup
<head>
<link href="CSS/RESTAURANT.css" rel="stylesheet" type="text/css" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RESTAURANT NAME</title>
<meta content="RESTAURANT NAME Home Page" name="description" />
</head>
Normally the url is relative to the css file but if you have trouble, the best is to use a navigator with a developper-tools menu like Chrome (or firebug in Firefox).
With this, you can figure the exact URL used to get this image and fix it.
check the url() value in your css background property,
if you have the dir structure as:
site/
css/
restaurant.css
img/
blackboard.gif
index.html
you should use:
background-image: url('../img/blackboard.gif');
so the css renderer will "up" one level directory (because ../) and search for the img folder.
Hope it works
I finally figured it out using https://jigsaw.w3.org/css-validator/. The problem was I had a at the top of my CSS. I am not sure how it got there and I know I did not initially post that, I though it was irrelevant. I apologize and thank you all for the help!
Please try this this should work
body {
background-image: url("your image name");
}
Thank you
I'm pretty new to the realm of web design, however, I've been having a problem that really has me stumped. My CSS file will not link with my HTML file. I've checked everything(I think). The file paths are identical, I linked the files with the correct syntax, yet it's still not working. I've attached some photos to help you guys get a better understanding of my problem. If you need more info, I'll be happy to provide it.
The first image is the folder I'm keeping the files in. The second one is the syntax I'm using to link the HTML and CSS. And the third and fourth files are screenshots of my editor, with the file paths on top. (And yes, I'm aware the CSS file is empty. But since it wasn't working correctly, I left it blank for now)
How do you know its not working if the CSS is empty?
Type body { background-color: #f0f; } to test if it's working.
Sometimes you need to force the browser to use the latest styelsheet. You can achieve this by adding a query string in the link.
Like this:
<link rel="stylesheet" href="Joe.css?v=1.1" "type="text/css"/>
As you can see I've added ?v=1.1 after "Joe.css
Then simply change version number every time you have done some changes in your CSS file. So in this case, when you have updated the CSS file you can change the number to ?v=1.2 and so on. By doing this you are forcing the browser to use the latest css.
But please note that you should only add this to the link not to the actual filename Joe.css - that stays the same.
Hope that helps!
You should debug your code.
Firstly, replace your <link> tag with the following and see if it works:
<style type="text/css">
body { background-color: #000; }
</style>
If your background color is changed to black - that's a good sign.
If not, something's wrong with your script or browser.
Next, replace the above piece of code with the following:
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
Create the file style.css in the same directory as your HTML script and put the following code in it:
body { background-color: #000; }
If that doesn't work, something's wrong with your script or browser.
btw, try to clear your browser cache.
Use a debugging tool in a web browser - Firebug in firefox, or the F12 developer tools in IE for example - to see what CSS is being loaded with your web page.
Try using syntax: body { background-image: url("Joe-Image/Joe-logo.png");} and are you sure you added the CSS in your html file?
Try this:
<link href="./joe.css" rel="stylesheet" type="text/css" media="all" />
I inserted the relative path. You could also try this:
<link href="./Joe.css" rel="stylesheet" type="text/css" media="all" />
With upper case j. Perhaps your web server is case sensitive?
my css is in assets/css/style.css and my image is in assets/img/bg.png But when i try to link the background image:
background: url(../img/bg.png);
it instead uses assets/css/../img/bg.png as the url. Why is it?
Html file (/index.html)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" media="screen" href="assets/css/style.css" />
</head>
<body>
<h1>Background Image</h1>
</body>
</html>
Css file (/assets/css/style.css)
body{
background:url(../img/bg.jpg);
}
For mac OS you should use this :
body {
background: url(../../img/bg.png);
}
you can use this
body{
background-image: url('../img/bg.png');
}
I tried this on my project where I need to set the background image of a div so I used this and it worked!
I had a similar problem but solved changing the direction of the slash sign:
For some reason when Atom copies Paths from the project folder it does so like background-image: url(img\image.jpg\)instead of (img/image.jpeg)
While i can see it's not the case for OP may be useful for other people (I just wasted half the morning wondering why my stylesheet wasn´t loading)
Since you are providing a relative pathway to the image, the image location is looked for from the location in which you have the css file. So if you have the image in a different location to the css file you could either try giving the absolute URL(pathway starting from the root folder) or give the relative file location path. In your case since img and css are in the folder assets to move from location of css file to the img file, you can use '..' operator to refer that the browser has to move 1 folder back and then follow the pathway you have after the '..' operator.
This is basically how relative pathway works and you can use it to access resoures in different folders. Hope it helps.
body
{
background-image: url('../images/bg.jpeg');
}
You are using cache system.. you can modify the original file and clear cache to show updates
You are using a relative path. You should use the absolute path, url(/assets/css/style.css).
Okay, time for my dumb question of the day.
I have an external css file that basically assign a background image to a button.
Css Code:
input.keypad
{
cursor: pointer;
display: block;
min-width: 64px;
width: 64px;
height: 64px;
margin: 0;
border: 0;
background: url(images/btn1.jpg) no-repeat center top;
}
Html code:
<input class="keypad" type="button" name="btnClickMe" id="btnClickMe" value="Click Me">
My dilema is that the first time I load the page it works 100%, but when I refresh it, it seems to ignore the width and height set in the css file. The image is is in the background, but cut off because of this.
I thought it might be some sort of caching so I included pragma tags which did not help at all. Any ideas?
Use Firebug to find the reason. It will help you to see which css properties are applied to the element and so on.
You select the element and you will see all css properties of it.
(source: getfirebug.com)
You have to learn that there are many useful tools out there which can help you solve many of your problems :) Especially Firebug. It is a must-have tool.
Here's some suggestions...
First, do all your page refreshes with Ctrl+F5 in Firefox to override browser cache each time.
Second, check that the button doesn't have a parent element somewhere in the CSS overriding it, such as "form.myForm input { ... }".
Third, instead of declaring the button background in the CSS, move that declaration into your HTML like this:
<input type="image" class="keypad" src="images/btn1.jpg"/>
... whilst keeping the size declarations in CSS as they are now.
See if some of those might help.
Firstly I'd like to thank Balon for pointing me in the right direction.
After using the browser add on he suggested and viewing the html source, I noticed that my <link tag pointing to the external css file was being placed within the <body of the html which I found very odd. Upon reviewing my html code, I saw that my <link tag was infact in the <head> tag, but was below the <script tag, which after swapping the tags around, the code now works 100%.
Here is an example of what I am trying to put across:
Code Before (Broken):
<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>
<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">
Code After (Fixed):
<link rel="stylesheet" href="css/example.css" type="text/css" media="screen">
<script type="text/javascript" language="javascript1.2" src="script/example.js"></script>