www.webdeveloper.com
Results 1 to 4 of 4

Thread: directory name with space in background-image: url

Hybrid View

  1. #1
    Join Date
    Apr 2008
    Posts
    84

    directory name with space in background-image: url

    When I am using background-image attribute with directory name having spaces in background-image url, this style is not working and background image is not getting applied
    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" lang="en" xml:lang="en" >
    	<head>
    		<title>
    			CSS Assignment 9 - Create an html file using CSS backgrounds, borders & list
    		</title>
    		<style type="text/css">
    
    			#main{
    				border:solid 1px #444444 ;
    				background-color:#aaaaaa;
    				background-image: url(../../../images For Web/Background images/water2.gif);
    				background-repeat:repeat;
    				margin:auto;
    				width:70%;
    				padding:40px;
    			}
    
    			
    		</style>
    	</head>
    
    	<body>
    		<div id="main">
    			<h1 id="hd3">CSS Assignment 9 - Create an html file using CSS backgrounds, borders & list</h1>
    
    						<div id="div1">
    							<h3 class="hd">This is 1st para using div</h3>
    							Of all the current major browsers, Internet Explorer's DOM support is by far the worst of all. <br /><a href="http://www.bing.ca" target="_blank">Search more here</a>
    						</div>
    
    
    						<div id="div2">
    							<h3 class="hd">This is 2nd para using div</h3>
    							Its DOM 2 Style Sheets and CSS implementation is so bad it should not be allowed to claim support for them at all. <br />
    							<a href="http://htmlhelp.com/reference/css" target="_blank">Visit this link</a>
    						</div>
    
    
    						<div id="div3">
    							<h3 class="hd">This is 3rd with white space controlled by style using div</h3>
    							Escape 5 can handle enough DOM to reference elements and their styles, and can move them through the document. 	<br />	<a href="http://www.w3schools.com/html/" target="_blank">Search here</a>
    						</div>
    
    
    						<div id="div4">
    							<h3 class="hd">This is 4th para with fantasy font and using div</h3>
    							Escape 5 can handle enough DOM to reference elements and their styles, and can move them through the document. <br />
    							<a href="http://www.w3schools.com/HTML/html_links.asp" target="_blank">Search here</a>
    						</div>
    
    		</div>
    	</body>
    </html>
    But, when I am using background-image attribute with directory name without spaces in background-image url, it is working fine and background image is getting applied. Does it mean that, we can not have directory name with spaces in path or relative path for background-image url ? If not, then why the code above is not working ?
    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" lang="en" xml:lang="en" >
    	<head>
    		<title>
    			CSS Assignment 9 - Create an html file using CSS backgrounds, borders & list
    		</title>
    		<style type="text/css">
    
    			#main{
    				border:solid 1px #444444 ;
    				background-color:#aaaaaa;
    				background-image: url(../../../imagesForWeb/Background_images/water2.gif);
    				background-repeat:repeat;
    				margin:auto;
    				width:70%;
    				padding:40px;
    			}
    
    			
    		</style>
    	</head>
    
    	<body>
    		<div id="main">
    			<h1 id="hd3">CSS Assignment 9 - Create an html file using CSS backgrounds, borders & list</h1>
    
    						<div id="div1">
    							<h3 class="hd">This is 1st para using div</h3>
    							Of all the current major browsers, Internet Explorer's DOM support is by far the worst of all. <br /><a href="http://www.bing.ca" target="_blank">Search more here</a>
    						</div>
    
    
    						<div id="div2">
    							<h3 class="hd">This is 2nd para using div</h3>
    							Its DOM 2 Style Sheets and CSS implementation is so bad it should not be allowed to claim support for them at all. <br />
    							<a href="http://htmlhelp.com/reference/css" target="_blank">Visit this link</a>
    						</div>
    
    
    						<div id="div3">
    							<h3 class="hd">This is 3rd with white space controlled by style using div</h3>
    							Escape 5 can handle enough DOM to reference elements and their styles, and can move them through the document. 	<br />	<a href="http://www.w3schools.com/html/" target="_blank">Search here</a>
    						</div>
    
    
    						<div id="div4">
    							<h3 class="hd">This is 4th para with fantasy font and using div</h3>
    							Escape 5 can handle enough DOM to reference elements and their styles, and can move them through the document. <br />
    							<a href="http://www.w3schools.com/HTML/html_links.asp" target="_blank">Search here</a>
    						</div>
    
    		</div>
    	</body>
    </html>

  2. #2
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    I think you should try:
    background-image: url('../../../images For Web/Background images/water2.gif');
    Note the quotes(').
    Or:
    background-image: url(../../../images&#37;20For%20Web/Background%20images/water2.gif);
    May be one of them would work?
    Try and tell me!
    Last edited by TheAliveWinner; 02-26-2012 at 11:11 AM.
    "It will never rain roses: when we want to have more roses, we must plant more roses." - George Eliot

  3. #3
    Join Date
    Mar 2011
    Posts
    1,139
    The relative URL for the background image is likely incorrect. Try replacing the relative URL in your CSS with a complete URL (ie. 'http://www.example.com/images/...').
    Rick Trethewey
    Rainbo Design

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,211
    Folder and file names should never have white space in them. Some (probably most) browsers will stop at first space in the path. It is also recommended that lowercase be used although this isn't as much a problem as white space within folder/file names.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles