• Locked
8 replies [Last post]
Sat, 2014-05-03 19:47
nhuyvan1106
nhuyvan1106's picture
Offline
newbie
Last seen: 8 years 6 weeks ago
Timezone: GMT-7
Joined: 2014-05-03
Posts: 6
Points: 10

Hi guys, I have some strange issue with the "background-image" property, when I insert the "background-image" property into the tag, it displays normally like it should as you can see in the first picture I've attached, but when I put the "background-image" property into an CSS external file, it does not show the custom background image at all as in the last picture I've attached. You guys know why this is happening? the same thing happens when I try to use the @font-face property also. Any suggestions are highly appreciated.

<!doctype html>
<html lang = "en-US">
    <head>
	    <meta charset = "UTF-8">
		<title>basic.html</title>
		<style type = "text/css">
		    body {
			    background-image: url("images/background.gif");
			}
		</style>
	</head>
	<body>
	    <div id= "all">
	        <div id = "header">
		        <h1>Heading level 1</h1>
		    </div>
			<div id = "nav">
				    <span id = "home"><a href = " ">Home</a></span>
					<span id = "lessons"><a href = " ">Lessons</a></span>
					<span id = "questions"><a href = " ">Questions &#38; Answers</a></span>
					<span id = "about"><a href = " ">About</a></span>
					<span id = "contact"><a href = " ">Contact Info</a></span>
			</div>
			<div id = "section">
			</div>
		</div>
	</body>
</html>

CSS external file:

body {
    background-image: url("images/background.gif");
	background-repeat: repeat;
}
 
 
#header {
    background-color: yellow;
	text-align: center;
}
 
#nav {
    border: 1px solid black;
	width: 80%;
    background-color: lime;
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	list-style-type: none;
	margin: auto;
 
}
 
span {
    display: block;
    -webkit-box-flex: 5;
	border-right: 1px solid black;
	text-align: center;
 
}
 
a {
	text-decoration: none;	
}
 
#section {
    background-color: red;
	border: 1px solid black;
	height: 5em;
	width: 80%;;
	margin: auto;
}

AttachmentSize
htmlsourcecode.png28.32 KB
result.png34.76 KB
externalcss.png21.97 KB
layout.png7.5 KB
Top
  • view bestreply
Tags:
Sat, 2014-05-03 21:11
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Relative addresses?

Where is the css file located? Remember, those relative addys are relative to the file, html file in the first (working) case and the css file in the other.

If the css file is not in the same directory as the html file, its address for the bg image is wrong.

On a side note, please do not post your source, html, css or js, as an image. Simply change the extension to "txt" and attach the file itself. Too, it does little or no good to post the working version; we need to see the html file that doesn't work.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Sun, 2014-05-04 09:29
#2
helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

I created an example for

I created an example for you.
You indeed need to delete the inline-css code from your HTML in order to make everything work.
Check this JSfiddle where I re-created your lay-out.

Don't forget to add this code inside your head tags:
<link rel="stylesheet" type="text/css" href="mystyle.css">
(Remember that the href="mystule.css" is not going to work for you, you have to fill in your own path and the name of your css sheet).

Cheers, Henk

Check Maximum Webdesign for your online solutions

Top
Sun, 2014-05-04 21:59
#3
nhuyvan1106
nhuyvan1106's picture
Offline
newbie
Last seen: 8 years 6 weeks ago
Timezone: GMT-7
Joined: 2014-05-03
Posts: 6
Points: 10

probably my explanation

probably my explanation wasn't clear enough. I put everything in the same folder(yes of course), what I meant was that, when I used the "background-image" property in an external CSS file, it didn't work, it didn't display the image AT ALL, but when I deleted the <link rel = "stylesheet" ......> mechanism, and used <style type =......>, and then "background-image" within that <style> tag, it displayed the image properly, I am really not sure why this is happening, the same thing happens to me too with the "@font-face" property.

//mod edit: Please wrap source code within [code][/code] bbcode tags. There is a button labeled "code" that will insert code tags. Fixed. ~gt

Top
Sun, 2014-05-04 23:39
#4
helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 47 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Then the only problem is that

Then the only problem is that you are probably linking to the wrong file.
I mean, if you have you css file inside a folder called css then it should be:

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

If you placed it a little further like css and then yourcssfile then you should make it like this:
<link rel="stylesheet" type="text/css" href="css/yourcssfile/mystyle.css">

Please check if the folders are correct, and if you created the link correctly.
Cause it should work, as I am showing you in the JSfiddle website.

Check Maximum Webdesign for your online solutions

Top
Sun, 2014-05-04 23:48
#5
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

More clarity required

nhuyvan1106 wrote:

probably my explanation wasn't clear enough. I put everything in the same folder(yes of course),

OK, not quite true, the image is in another directory, right? ./images/background.gif

Quote:

what I meant was that, when I used the "background-image" property in an external CSS file, it didn't work, it didn't display the image AT ALL, but when I deleted the <link rel = "stylesheet" ......> mechanism,

The full element being 

<link rel="stylesheet"
      type="text/css"
      media="screen"
      href="externalcss.css"> <!-- or whatever the name -->

If what you have is not exactly as I showed, what is it?

Quote:

and used <style type =......>, and then "background-image" within that <style> tag, it displayed the image properly, I am really not sure why this is happening, the same thing happens to me too with the "@font-face" property.

That the same issue occurs with @font-face is an additional clue that, like the actual source codes, you have withheld.

So, where is the actual code?

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Mon, 2014-05-05 00:40
#6
nhuyvan1106
nhuyvan1106's picture
Offline
newbie
Last seen: 8 years 6 weeks ago
Timezone: GMT-7
Joined: 2014-05-03
Posts: 6
Points: 10

The first attachment is the

The first attachment is the folder containing all the files, the second attachment is the result when I run the codes. I am sorry for any confusion guys, and your helps are greatly appreciated.

Here is the HTML sources code.

<!doctype html>
<html lang = "en-US">
    <head>
	<meta charset = "UTF-8">
	<title>basic.html</title>
	<link rel = "stylesheet"
              type = "text/css"
	      href = "CSS/external.css">
    </head>
    <body>
        <div id= "all">
	    <div id = "header">
                <h1>Heading level 1</h1>
	    </div>
 
	    <div id = "nav">
	        <span id = "home"><a href = " ">Home</a></span>
		<span id = "lessons"><a href = " ">Lessons</a></span>
		<span id = "questions"><a href = " ">Questions &#38; Answers</a></span>
		<span id = "about"><a href = " ">About</a></span>
		<span id = "contact"><a href = " ">Contact Info</a></span>
            </div>
 
       	    <div id = "section">
	    </div>
	</div>
    </body>
</html>

-----------------------------------------------------------------------------------------
Here is the external CSS file

body {
    background-image: url("images/background.gif");
	background-repeat: repeat;
}
@font-face {
    font-family: "Ardestine";
	src: url("Fonts/ARDESTINE.ttf");
}
 
#header {
    background-color: yellow;
	text-align: center;
	font-family: Ardestine, "sans serif";
}
 
#nav {
    border: 1px solid black;
	width: 80%;
    background-color: lime;
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	list-style-type: none;
	margin: auto;
 
}
 
span {
    display: block;
    -webkit-box-flex: 5;
	border-right: 1px solid black;
	text-align: center;
 
}
 
a {
    display: block;
	text-decoration: none;	
}
 
#section {
    background-color: red;
	border: 1px solid black;
	height: 5em;
	width: 80%;;
	margin: auto;
}

AttachmentSize
Directory.png 41.79 KB
result.png 37.58 KB
Top
Mon, 2014-05-05 05:56
#7
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 17 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Here's the culprit

As I guessed. The css file is not in the same directory as the html file.

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

The browser is seeking the bg image in /CSS/images/, which doesn't exist.

Edit the css file like so:

body {
  background-image: url("/images/background.gif");
  background-repeat: repeat;
}
 
or
 
body {
  background-image: url("../images/background.gif");
  background-repeat: repeat;
}

You have the identical issue with the @font-face address. Relative addresses are relative to the address of the file making the call.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Tue, 2014-05-06 00:57
#8
nhuyvan1106
nhuyvan1106's picture
Offline
newbie
Last seen: 8 years 6 weeks ago
Timezone: GMT-7
Joined: 2014-05-03
Posts: 6
Points: 10

gary.turner wrote: As I

gary.turner wrote:

As I guessed. The css file is not in the same directory as the html file.

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

The browser is seeking the bg image in /CSS/images/, which doesn't exist.

Edit the css file like so:

body {
  background-image: url("/images/background.gif");
  background-repeat: repeat;
}
 
or
 
body {
  background-image: url("../images/background.gif");
  background-repeat: repeat;
}

You have the identical issue with the @font-face address. Relative addresses are relative to the address of the file making the call.

cheers,

gary

Man, Gary, that makes tons of sense, I had been mistakenly thinking that they just had to be in the same folder, then everything should be okay. Man, thank you so so much, I appreciate your help alot. God bless.

Nhuy

Top
  • Locked