background-image: url('Images/P906004700.JPG'); in ASP.NET

Control Panel Forum Hosting Help ASP.NET 4 & SQL 2008 R2 Hosting Resources Notice

Total members: 210366
Average new registrations per day (in last 7 days): 16

New Registration: Open

Register Now

Home » Questions & Answers » background-image: url('Images/P906004700.JPG');

background-image: url('Images/P906004700.JPG');

7/29/2010

Author: Robert Mur

Hi,
I use this to reference an image in development but does not seem to work here?? is there something I am missing??

The Image is in folder
<Root>\webroot\Images

The code that makes the reference is in .css
<root>\webroot

background-image: url('Images/P906004700.JPG');

Bit confused with the unix file reference \ should I use backslash??

Regards rob

Answers .............

Author: Ahmed Talu

Posted Date: 7/30/2010

*************************************************

Robert Mur

I interpret your question as being about the HTML code sent to a web-browser (client), not the code used by a server to produce dynamic pages like *.php/*.jsp/*.asp (or at this host *.aspx).

Ordinary web browsers are expected to follow HTML-specifications. You can download HTML and CSS specifications as *.zip files from The World Wide Web Consortium http://www.w3.org/ ). Various browsers have their own way of rendering pages but what you're asking about should have the same syntax regardless of what brand of HTML browser being used.

*************************************************

Putting *.css in WEBROOT should work fine.

Computerers typically use backslash for internal file systems but (forward) slash for Internet addresses. Backslash is used within CSS to escape some characters in URL but you are safe if only using A-Z 0-9. The same with http:// (does not need escape).

The CSS specification is flexible with regards to quotes. I think you can choose between:
No quotes: {background-image: url(image.jpg)}
A pair of single quotes: {background-image: url('image.jpg')}
A pair of double quotes: {background-image: url("image.jpg")}

White space is optional:
{background-image: url( image.jpg )}
{background-image: url( 'image.jpg' )}
{background-image: url( "image.jpg" )}

The semicolon ; in your example. I don't think you can put the semicolon it in that position.

*************************************************

Suppose we have images at three levels:
http://Example.com/image.jpg
http://Example.com/Directory_A/image.jpg
http://Example.com/Directory_A/Directory_B/image.jpg

Adding another branch:
http://Example.com/SecondBranch/image.jpg

Now, here's a HTML file with relative links to each image as well as displaying all the images:

*************************************************
http://Example.com/Directory_A/VariousOrchids.html
*************************************************
<html > <head> <title> This example was found in ASPSPIDER forum. </title> </head> <body> 

Relative link to image one level up (http://Example.com/image.jpg): 
<A href="../image.jpg">href="../image.jpg"</A> 
<IMG src="../image.jpg" alt="Browser can not display jpg"> 

Relative link to image in same folder (http://Example.com/Directory_A/image.jpg): 
<A href="image.jpg">href="image.jpg"</A> 
<IMG src="image.jpg" alt="Browser can not display jpg"> 

Relative link to image in folder one level down (http://Example.com/Directory_A/Directory_B/image.jpg): 
<A href="/Directory_B/image.jpg"> href="/Directory_B/image.jpg" </A> 
<IMG src="/Directory_B/image.jpg" alt="Browser can not display jpg"> 

Finally, relative link to an image located at same level but in another folder (http://Example.com/SecondBranch/image.jpg): 
<A href="../SecondBranch/image.jpg"> href="../SecondBranch/image.jpg" </A> 
<IMG src="../SecondBranch/image.jpg" alt="Unix can display any kind of image."> 

The last example if adapted to ASPSPIDER would correspond to an image located at another website because both /Directory_A/ and /SecondBranch/ would be websites at this host. The website http://aspspider.ws/Directory_A/ would in other words be stealing bandwidth from http://aspspider.ws/SecondBranch/ when visitors (to Directory_A) fetches their images. 

Warning! Don't do that! 

<A href="http://www.aspspider.com/"> ASPSPIDER.NET located at http://www.aspspider.com/ </A>
 </body> </html>
*************************************************

Using the same relative URLs as above in *.css:

body {background-image: url("../image.jpg")}
p {background-image: none}

body {background-image: url("image.jpg")}
p {background-image: none}

body {background-image: url("/Directory_B/image.jpg")}
p {background-image: none}

body {background-image: url("../SecondBranch/image.jpg")}
p {background-image: none}

Beware that if the *.html file and the *.css file are located in different folders then a relative address in the *.css file will be relative to the *.css file (not relative to the *.html that refers to the *.css).

*************************************************

It's possible to use absolute addressing in both *.html and *.css but appart from the extra work typing/pasting there's also work replacing URLs if moving/renaming folders (or moving to another domain like a paid hosting service).

*************************************************

I read your site description before I typed the above. Some info: After three months (90 days) you have to re-create your site using another top-domain at ASPSPDIDER (read the tips in ASPSPIDER's Tips directory). While learning ASP.NET in preparation for hosting at another host I suggest you access the images only for your own testing. The WEBMASTER became very sensitive to images at some point. In the beginning people were allowed to upload/download images through *.aspx pages as they pleased. That's no longer the case. I understand that's not what your site is about but as I said, the WEBMASTER is very sensitive to image hosting. There are some size restrictions. I'm not sure how to interpreet them. Anyway, to reduce traffic to your site you may choose to keep the URLs to *.html/*.css/*.jpg secret during development.

Participation in the forum (not spam) will please the WEBMASTER. Though this site is about ASP.NET Unix stuff is not banned (ough to be within some usefull context though). You may use your website even if you don't participate in the forum but people can't expect getting any favour from the WEBMASTER if not participating.

*************************************************

If you have access to a Windows PC where you can login as an administrator then Microsoft Corporation offers free software (Visual Web Developer Express version of Visual Studio) for developing ASP.NET websites with or without SQL Server.

Being a beginner making a website then ASPSPIDER has some tutorials you may read (http://www.aspspider.com/tutorials/ ). There's also other tutorial sites like http://www.w3schools.com/ . Not sure if they've updated their ASP.NET tutorial to ASP.NET version 2.0 or not. Anyway, go for HTML and CSS tutorials first. There's no obligation to use dynamic server pages.

*************************************************
URL to W3Schools is now corrected.
*************************************************

Author: Siavash Hesni

Posted Date: 7/31/2010

not bad

Author: Robert Mur

Posted Date: 8/1/2010

Hi Siavash Hesni,
Thanks you for the great effort you went to in your reply. It's one of those dumb things that the reference seemed to somehow pick up and work. NOt sure really why!! but I'm making more progress with my site. Thanks also for the tips about the expectations from the webmaster and futhuer Hosting Regards Rob

You must login to post answer for this question.