1

I was successfully able to move internal CSS code into an external .css file just fine. I realized that no matter what I tried, it just wouldn't work unless it was in the same directory as the file I wanted. This isn't really an issue in this case, but I wanted to keep my site organized by moving all the .css files into one css directory. Like I said not really an issue with what I am looking at now, but when I get to the navigation menu which will be used by all pages, it may become an issue with multiple files in different directories being used.

Here is what I have that is working with the HTML and the CSS in the same root directory:

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title>DocTech25 Universe</title> 
        <link rel="stylesheet" type="text/css" href="docTech25Banner.css"> 
    </head> 
    <body> 
    </body> 
</html>

CSS

html 
{
    background: url('resources/images/docTech25Banner.png') no-repeat center center fixed;  

    -webkit-background-size: cover; /* Safari & Chrome */
    -moz-background-size: cover; /* Firefox */
    -o-background-size: cover; /* Opera */
    background-size: cover; /* Internet Explorer? */

} 

Here is my directory structure:
root
root/resources
root/resources/css
root/resources/images

I have tried:

<link rel="stylesheet" type="text/css" href="resources/css/docTech25Banner.css"> 
<link rel="stylesheet" type="text/css" href="/resources/css/docTech25Banner.css"> 
<link rel="stylesheet" type="text/css" href="http://docTech25.net/resources/css/docTech25Banner.css">

The only thing that is working right now is if I have this:

<link rel="stylesheet" type="text/css" href="docTech25Banner.css">

This is contained in the same directory as the file. Any help would be greatly appreciated.

Edited by DocTech25: edit

2
Contributors
2
Replies
19
Views
2 Years
Discussion Span
Last Post by DocTech25
0

Just want to be confirm, is your html file is in the root directory?
If yes, then try
<link rel="stylesheet" type="text/css" href="./resources/css/docTech25Banner.css">

2

Yes, I just figured it out. I had to change the image in the css to be relative so instead of:

background: url('resources/images/docTech25Banner.png') no-repeat center center fixed; 

I am now using:

   background: url('../images/docTech25Banner.png') no-repeat center center fixed;  

Thanks for your help. Now onto trying to seperate the bootstrap code into its' own seperate file if possible.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.