The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
 Reply to this topicStart new topic
> background-image weird error
broodwar1998
post Oct 25 2016, 07:04 PM
Post #1


Novice
**

Group: Members
Posts: 25
Joined: 30-October 15
Member No.: 23,695
When I use the CSS editor in the firefox browser I can see my img for my <h1></h1> background. However when I close the CSS editor in browser the img vanishes. Can someone please help?

IPB Image
IPB Image

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <!-- Links CSS -->

  <link rel = "stylesheet"
      type = "text/css"
      href = "css/sciC1.css" />
      
  <title>scienceProject</title>
</head>

<body>
  <h1></h1>
  
  <div id = "menu">
   <ul>
    <li><a href = "#alpha">Alpha</a></li>
    <li><a href = "#beta">Beta</a></li>
    <li><a href = "#gamma">Gamma</a></li>
    <li><a href = "#delta">Delta</a></li>
   </ul>
  </div>
  
  <div class = "content"
       id = "alpha">
       <h2>Alpha</h2>
  </div>
  
  <div class = "content"
       id = "beta">
       <h2>Beta</h2>
  </div>
  
  <div class = "content"
       id = "gamma">
       <h2>Gamma</h2>
  </div>
  
  <div class = "content"
       id = "delta">
       <h2>Delta</h2>
  </div>
  
</body>
</html>



CODE


/* sciC1 FixedRelative.css */

h1 {
background-image: url('images/sciHead.jpg');
min-height: 4em;
}

#menu {
position: fixed;
width: 18%;
}

#menu li {
list-style-type: none;
margin-left: -2em;
text-align: center;
}

#menu a {
display: block;
border: 2px gray outset;
text-decoration: none;
color: black;
}

#menu a:hover {
color: white;
background-color: black;
border: 2px gray inset;
}

#menu h2 {
text-align: center;
}

.content {
position: relative;
left: 20%;
width: 80%;
}

.content h2 {
border-top: 3px black double;
min-height: 15em;
}



This post has been edited by broodwar1998: Oct 25 2016, 07:12 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 25 2016, 08:44 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Did you add the background with the FF editor or is that CSS there in the physical CSS file?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
broodwar1998
post Oct 25 2016, 11:54 PM
Post #3


Novice
**

Group: Members
Posts: 25
Joined: 30-October 15
Member No.: 23,695
QUOTE(pandy @ Oct 25 2016, 08:44 PM) *

Did you add the background with the FF editor or is that CSS there in the physical CSS file?


The CSS shown is in the physical file. I've never had this issue before. I honestly have no idea what's going on lol.

This post has been edited by broodwar1998: Oct 25 2016, 11:57 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 26 2016, 12:15 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
The background shows fine with a dummy image. I'd say there's something wrong with the image or the URL to it, but that doesn't explain why it shows when you have the CSS editor open. wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
broodwar1998
post Oct 26 2016, 12:34 AM
Post #5


Novice
**

Group: Members
Posts: 25
Joined: 30-October 15
Member No.: 23,695
QUOTE(broodwar1998 @ Oct 25 2016, 11:54 PM) *

QUOTE(pandy @ Oct 25 2016, 08:44 PM) *

Did you add the background with the FF editor or is that CSS there in the physical CSS file?


The CSS shown is in the physical file. I've never had this issue before. I honestly have no idea what's going on lol.




I added the <img></img> tag into my <h1></h1> tag and it works properly but I don't want it in my HTML. I prefer inserting imgs through CSS. Any advice?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
broodwar1998
post Oct 26 2016, 12:36 AM
Post #6


Novice
**

Group: Members
Posts: 25
Joined: 30-October 15
Member No.: 23,695
QUOTE(pandy @ Oct 26 2016, 12:15 AM) *

The background shows fine with a dummy image. I'd say there's something wrong with the image or the URL to it, but that doesn't explain why it shows when you have the CSS editor open. wacko.gif



Lol. I'm in a pickle sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 26 2016, 02:13 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
There must be something wrong... Try another background picture just to see if the same thing happens.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
broodwar1998
post Oct 26 2016, 02:29 AM
Post #8


Novice
**

Group: Members
Posts: 25
Joined: 30-October 15
Member No.: 23,695
I have no clue what's going on but even my body background-image vanishes without the CSS editor open. Here is my updated code... Every image I try to insert using CSS vanishes while the ones entered in my html stay. I really need help with this.

CODE


/* FixedRelative.css */

body{
background-image: url('images/sciBBG.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}

h1 {
min-height: 4em;
text-align: center;
}

#menu {
position: fixed;
width: 18%;
height: 8em;
}

#menu li {
list-style-type: none;
text-align: center;
margin-left: -2.5em;
width: 15.2em;
}

#menu a {
display: block;
border: 2px gray outset;
text-decoration: none;
color: black;
height: 1.5em;
}

#menu a:hover {
color: white;
background-color: black;
border: 2px gray inset;
}

#menu h2 {
text-align: center;
}

.content {
position: relative;
left: 20%;
width: 80%;
}

.content h2 {
border-top: 3px black double;
min-height: 15em;
}



CODE


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- Links CSS -->

  <link rel = "stylesheet"
        type = "text/css"
        href = "css/sciC1.css" />
      
  <title>scienceProject</title>
</head>

<body>
  <h1><img src='images/sciHead.png' /></h1>
  
  <div id = "menu">
   <ul>
    <li><a href = "#ast">Astronomy</a></li>
    <li><a href = "#chem">Chemistry</a></li>
    <li><a href = "#bio">Biology</a></li>
    <li><a href = "#phys">Physics</a></li>
   </ul>
  </div>
  
  <div class = "content"
       id = "ast">
       <h2>Astronomy</h2>
  </div>
  
  <div class = "content"
       id = "chem">
       <h2>Chemistry</h2>
  </div>
  
  <div class = "content"
       id = "bio">
       <h2>Biology</h2>
  </div>
  
  <div class = "content"
       id = "phys">
       <h2><img src='images/physHead.jpg'/></h2>
  </div>
  
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
broodwar1998
post Oct 26 2016, 02:32 AM
Post #9


Novice
**

Group: Members
Posts: 25
Joined: 30-October 15
Member No.: 23,695
QUOTE(pandy @ Oct 26 2016, 02:13 AM) *

There must be something wrong... Try another background picture just to see if the same thing happens.



I've tried background-image for all elements in the html, also I've tried using different images for each element and they all vanish without FF CSS editor open sad.gif. I see nothing wrong with the code. Honestly... It's pretty organized and it validates.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
broodwar1998
post Oct 26 2016, 02:42 AM
Post #10


Novice
**

Group: Members
Posts: 25
Joined: 30-October 15
Member No.: 23,695
I think I figured it out. I have FF Web Developer tool and under the CSS option I have to active "Add user style sheet"... Omg lmao. Does that sound right? lol... I don't think that's right actually... I have to select the style sheet everytime I open the page in my browser >.<

This post has been edited by broodwar1998: Oct 26 2016, 02:47 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 26 2016, 02:58 AM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
And the user style sheet removes background images? laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
broodwar1998
post Oct 26 2016, 03:02 AM
Post #12


Novice
**

Group: Members
Posts: 25
Joined: 30-October 15
Member No.: 23,695
QUOTE(pandy @ Oct 26 2016, 02:58 AM) *

And the user style sheet removes background images? laugh.gif



I have no clue man... It can't be the fix though. I disabled the Developer tool and the background image doesn't load. It only loads with the CSS editor open or when I manually select the user style sheet. Everything else is working correctly CSS wise. The only code that isn't working properly is the background-image.

I'm soooo freaking lost wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
broodwar1998
post Oct 26 2016, 03:08 AM
Post #13


Novice
**

Group: Members
Posts: 25
Joined: 30-October 15
Member No.: 23,695
I'll have to come back to this. I need a few hours of sleep lol. Thanks pandy for trying to help. Goodnight for now.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 26 2016, 03:34 AM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Can you upload the lot to a server so we can see if it happens to us too?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 26 2016, 07:32 AM
Post #15


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
The CSS file is located in

CODE
css/sciC1.css

and in turn looks for an image in

CODE
images/sciHead.jpg

so I guess the image should be located in this directory:

CODE
css/images/sciHead.jpg

--is that correct?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
broodwar1998
post Oct 26 2016, 06:31 PM
Post #16


Novice
**

Group: Members
Posts: 25
Joined: 30-October 15
Member No.: 23,695
QUOTE(pandy @ Oct 26 2016, 03:34 AM) *

Can you upload the lot to a server so we can see if it happens to us too?



pandy, I don't have a server to upload it to. sad.gif. Also Christian J, where the html file is located is where the stylesheet is pulled to. It's technically searching for the image from where the physical html file is located. So the link is correct. The problem is that it works just fine with the CSS editor open but when it's closed the image vanishes. In which case if it were a location error then it just wouldn't work at all.


I guess I could download Apache and put together something to get a local server running so that when I have errors in the future I can host it and go from there??? I'm not to sure how to do it but I got some books and w3schools to help me out smile.gif

This post has been edited by broodwar1998: Oct 26 2016, 06:54 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 26 2016, 07:28 PM
Post #17


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(broodwar1998 @ Oct 27 2016, 01:31 AM) *

It's technically searching for the image from where the physical html file is located. So the link is correct.

No, a relative image URL is relative to the CSS file calling it:

"For CSS style sheets, the base URI is that of the style sheet, not that of the source document."
https://www.w3.org/TR/CSS21/syndata.html#value-def-uri

(there's an example on the linked page as well). So my guess is that the CSS editor has nothing to do with this, unless it somehow fixes the broken URLs. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
broodwar1998
post Oct 26 2016, 07:42 PM
Post #18


Novice
**

Group: Members
Posts: 25
Joined: 30-October 15
Member No.: 23,695
QUOTE(Christian J @ Oct 26 2016, 07:28 PM) *

QUOTE(broodwar1998 @ Oct 27 2016, 01:31 AM) *

It's technically searching for the image from where the physical html file is located. So the link is correct.

No, a relative image URL is relative to the CSS file calling it:

"For CSS style sheets, the base URI is that of the style sheet, not that of the source document."
https://www.w3.org/TR/CSS21/syndata.html#value-def-uri

(there's an example on the linked page as well). So my guess is that the CSS editor has nothing to do with this, unless it somehow fixes the broken URLs. unsure.gif



alright I will change the directory and see what happens and get back to you on the situation
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
broodwar1998
post Oct 26 2016, 07:45 PM
Post #19


Novice
**

Group: Members
Posts: 25
Joined: 30-October 15
Member No.: 23,695
I apologize Christian you're absolutely correct and it did fix my problem. I thank you very much sir.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 26 2016, 09:46 PM
Post #20


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
But the mystery remains. Why on earth did the background show when the CSS editor was open? laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 05:41 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC