Member Avatar for DocTech25

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 because: edit
  • 2 Contributors
  • 2 Replies
  • 215 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by DocTech25
Member Avatar for lps

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

Member Avatar for DocTech25

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, networking, learning, and sharing knowledge.