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:


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


    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:

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.

Recommended Answers

All 2 Replies

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">

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.