13 Replies - 1317 Views - Last Post: 05 September 2013 - 06:38 AM

#1 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Background Image not displaying

Posted 04 September 2013 - 03:21 PM

I'm confused on attempting to make a background image work

i've tried
  • background-image:url (../images/sunrise1024x768.gif);
  • background-image:url (/public_html/images/images/sunrise1024x768.gif);
  • Different file formats; gif, PNG-8, PNG-24 (both interlaced no opacity), jpeg
  • using imageshack (http://imageshack.us/photo/my-images/194/n8s.gif/)


http://www.w3schools...round-image.asp
-according to what I've found the coding I'm using should be right

I just cannot get the image to show. Am I missing something?

html
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Mobile Specific Metas
    ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- [if lt IE 9]-->
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<!--[endif] -->

    <!-- mobile navi js -->
    <script src="assets/js/navigation.function.js"></script>
    <!-- mobile navi END-->
    

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

<script src="myScript.js"></script>

<title>William Leininger</title>

</head>
<body>
	<div id="header">
  	<ul>
  	  <li class="fancy"><a href="index.html">home</a></li>        
  	  <li class="fancy"><a href="about.html">about</a></li>
  	  <li class="fancy"><a href="mailto:williamrleininger@gmail.com">williamrleininger@gmail.com</a>
  	  <li class="fancy"><a href="resume.html">resume</a></li>
      <li class="fancy"><a href="portfolio.html">portfolio</a></li>
  </ul>
 </div>
        <div id="content">
        <br>
          <h3>intro</h3>
            <p>i am william leininger</p>
        </div>    
    </body>
</html>
<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->




css
*
{
    margin:0;padding:0;    
}
html,body
{
    height:100%;
    width:100%;
}
body
{
/*    display:table; for table attempt to fill page content automatically*/
}
#header
{
	z-index:1; /* use z-index for auto filling divs */
/*	position:relative;*/ /* use z-index for auto filling divs */
	position: fixed;
    width: 100%; 
	height: 20px;
    background: #2790D8;
/*    display:table-row; for table attempt to fill page content automatically*/ 
	text-align:center;
}
li.fancy {
    display:inline;
	left:25%; /*keep header in center on iPhone5 mobile */
}
#content {
/*	background: #FF0000;*/
/*	width: 1366px;
	height:768px;*/
	position:absolute; /* use z-index for auto filling divs */
	z-index:-1; /* use z-index for auto filling divs */
	height:100%; /* use z-index for auto filling divs */
	width:100%; /* use z-index for auto filling divs */
/*	background-color:red;
*/	text-align:center;
    background-image:url (../images/sunrise1024x768.gif); 
	background-size:cover;
/*	background-size: contain;*/
}
ul{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	text-decoration: none;
	}

#fancy{
	display:inline;
	}
	
a:hover{
	text-decoration:none;
}

/*#email{
    float:right;
	margin-right: 5px;
	padding-top: 5px;
	font-size: 16px;
	font-family: Verdana, sans-serif;
	color: #ffffff;
}
*/

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 65%;
	}

}

/* for 700px or less */
@media screen and (max-width: 700px) {

	#content {
		width: auto;
		float: none;
	}

}

/* for 480px or less */
@media screen and (max-width: 480px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 24px;
	}

}



Is This A Good Question/Topic? 0
  • +

Replies To: Background Image not displaying

#2 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3511
  • View blog
  • Posts: 11,992
  • Joined: 12-December 12

Re: Background Image not displaying

Posted 04 September 2013 - 03:29 PM

Check your browser's console for an error message - there are links in my signature. If it says something like "file or resource not found" then it is not locating your image. Check the path again - if you are using a css file then the path is relative to this css-file, not to the HTML file that references it.

I would also try moving the image temporarily to the same folder-level as the css or HTML file. You might also type the image's location directly in the browser's address-bar.

Give the element a background colour temporarily to check that it shows in the browser as, in some circumstances, it is possible for an element's height to disappear (height-collapse).

Added: Just seen your code: remove the space after url and use apostrophes around the image-address. These are not always required but I would definitely use them with the dots '..'.

This post has been edited by andrewsw: 04 September 2013 - 03:30 PM

Was This Post Helpful? 1
  • +
  • -

#3 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Re: Background Image not displaying

Posted 04 September 2013 - 03:57 PM

Have Done:

I am able to set the background color to red successfully, I commented it out as I am uncertain if there would be conflict with having both a color and an image specified or since the image is listed later than the color it would override the color.
=TLDR: color red does work for the div in question


I will read over your signature to check the browser console.
-console output below
Uncaught SyntaxError: Unexpected token < error404.000webhost.com/?:1
3
Uncaught TypeError: Cannot set property 'innerHTML' of null myScript.js:11
48
Uncaught TypeError: Cannot set property 'innerHTML' of null myScript.js:11
jsUpdateSize myScript.js:11
(anonymous function)


I put the image in "s with no result.
-i proceeded to try directing to the image via from server root without any result
background-image:url "root/public_html/images/sunrise1024x768.gif";

Work In Progress:

I was curious about how I would search that the specific image filepath as findable in a web browser.

I am working on directing the css to look for the background image via image location relative to index.html file & next to css file and already have it in the images folder
-will post results shortly
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3511
  • View blog
  • Posts: 11,992
  • Joined: 12-December 12

Re: Background Image not displaying

Posted 04 September 2013 - 04:15 PM

background-image:url "root/public_html/images/sunrise1024x768.gif";

You've still got the space after url, and you've lost the brackets.

You can type the full address/path to your image directly in the browser's address-bar and it will display just the image - if it is at that location.

If you type

yourwebsiteaddress/images/

in the address-bar it will normally display a list of the files in that folder/location.

Also, if you are using a free/cheap hosting, it is possible that the image has not been uploaded to your live site yet (even though you can see it in your files-list).

This post has been edited by andrewsw: 04 September 2013 - 04:12 PM

Was This Post Helpful? 0
  • +
  • -

#5 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Re: Background Image not displaying

Posted 04 September 2013 - 04:39 PM

Image on Server
-went to http://williamleinin...t16.net/images/ and I found the image I am trying to use as well as others
=displayed correctly when clicked on

CSS Validation / image linking
-code was off, I misinterpreted. Sorry.
-currently is: background-image:url("root/public_html/images/sunrise1024x768.gif");
-validated my css with your sig's help: http://jigsaw.w3.org...dator/validator and was successful

Console Error
=Console found issues with .js file. I commented it out so it's no longer a part of the current picture.

image relocation
-relocated image to same folder as index.html & css
+updated coding background-image:url("sunrise1024x768.gif");
=works. now I will remove from one location to find out where it's actually reading from.
Was This Post Helpful? 1
  • +
  • -

#6 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3511
  • View blog
  • Posts: 11,992
  • Joined: 12-December 12

Re: Background Image not displaying

Posted 04 September 2013 - 04:51 PM

background-image: url("../images/sunrise1024x768.gif");

works for me in the css-file, although the image is much taller than the content div (currently).

BTW You might have posted the link to your site, in addition to the code, seeing as it is live.

BTWW Glad to see that you are validating the css ;) and taking on-board my advice: you can learn a lot from this process, and the debugging approach that it requires.

This post has been edited by andrewsw: 04 September 2013 - 04:51 PM

Was This Post Helpful? 0
  • +
  • -

#7 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Re: Background Image not displaying

Posted 04 September 2013 - 05:00 PM

Yeah I posted it thinking I'd show what I was doing. I apologize, I again don't understand, regarding your first BTW.

Image Location
-I deleted the image from the folder where index.html was located
+waited several minutes and it still showed
=deleted from css folder, after waiting image quit showing.

So now I know when I only specify the image the CSS is looking by default in the css folder. I would figure this wouldn't happen. Interesting. Is there a possible way to direct CSS to look at the specific image folder or move the image folder inside the css, which seems more of a workaround but hey a fix is a fix afterall?
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3511
  • View blog
  • Posts: 11,992
  • Joined: 12-December 12

Re: Background Image not displaying

Posted 04 September 2013 - 05:05 PM

If the image was in the same location as the css file then you would use:

"theimage.gif"

if it was one level up from the css-file's location, in a folder named images, you would use:
"../images/theimage.gif"

Was This Post Helpful? 1
  • +
  • -

#9 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Re: Background Image not displaying

Posted 04 September 2013 - 05:05 PM

EDIT: My last paragraph wasn't technically correct (still don't know of a way to edit then cleanup my mistake)

Now what I know is when I only specify the image, by default the image is being looked for inside the CSS folder. This strikes me as weird. Ironically since I deleted the image and reuploaded I am waiting to re-confirm this.
Was This Post Helpful? 0
  • +
  • -

#10 Valek  Icon User is offline

  • The Real Skynet
  • member icon

Reputation: 542
  • View blog
  • Posts: 1,713
  • Joined: 08-November 08

Re: Background Image not displaying

Posted 04 September 2013 - 05:07 PM

View Postl2g2h007, on 04 September 2013 - 08:00 PM, said:

I again don't understand, regarding your first BTW.


He's saying you could have given us a link to the live site with this code running so we can get a better idea of what it looks like.

EDIT: I'm dumb. He actually meant to post the code instead of just a link to the site. I'm sorry, I wrote that backwards.

I was going to say more, but andrewsw's post before this one was made while I was replying, so the rest I was going to say isn't necessary.

This post has been edited by Valek: 04 September 2013 - 05:47 PM
Reason for edit:: I can't brain today.

Was This Post Helpful? 1
  • +
  • -

#11 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Re: Background Image not displaying

Posted 04 September 2013 - 05:27 PM

View Postandrewsw, on 04 September 2013 - 11:51 PM, said:

background-image: url("../images/sunrise1024x768.gif");

works for me in the css-file, although the image is much taller than the content div (currently).


How did you know the div's size out of curiosity? I made something simple that wouldn't be too affected by possible cropping .
Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3511
  • View blog
  • Posts: 11,992
  • Joined: 12-December 12

Re: Background Image not displaying

Posted 04 September 2013 - 05:45 PM

In Google Chrome I viewed your page and right-clicked, Inspect Element. All the css details are on the right and as you point at elements a little box pops up with the width-height metrics. Actually, #content is taller than I first read, as the Chrome dev-tools give a false impression of the height.

This post has been edited by andrewsw: 04 September 2013 - 05:48 PM

Was This Post Helpful? 1
  • +
  • -

#13 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3511
  • View blog
  • Posts: 11,992
  • Joined: 12-December 12

Re: Background Image not displaying

Posted 05 September 2013 - 02:37 AM

View PostValek, on 05 September 2013 - 12:07 AM, said:

He's saying you could have given us a link to the live site with this code running so we can get a better idea of what it looks like.

EDIT: I'm dumb. He actually meant to post the code instead of just a link to the site. I'm sorry, I wrote that backwards.

You were right the first time ;). Posting code (wrapped in tags) is preferred to just a link to a site: the code will remain within the topic for reference and it saves having to wade through a site to find it. However, an additional site-link should be included, if there is a live-site. So.. both!

This post has been edited by andrewsw: 05 September 2013 - 07:28 AM

Was This Post Helpful? 1
  • +
  • -

#14 Valek  Icon User is offline

  • The Real Skynet
  • member icon

Reputation: 542
  • View blog
  • Posts: 1,713
  • Joined: 08-November 08

Re: Background Image not displaying

Posted 05 September 2013 - 06:38 AM

Yeah, that's why I corrected it. My first post said you were looking for a link instead of also having the code in the topic. Both where possible is preferred though, I agree.

This post has been edited by andrewsw: 05 September 2013 - 08:05 AM
Reason for edit:: Removed quote

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1