I have tried everything to get a background image to work but have had no luck.
I'm using most current versions of Windows and IE.
Works fine server side.
Does anyone have an example?
Note: The img tag in the body renders the image just fine.
also tried background:url...
<!DOCTYPE html>
<html>
<head>
<style>
html { height:100%; width:100%;
background-image:url("file://C:\Users\Public\Pictures\Sample Pictures\florida-orlando-resort.jpg");
}
</style>
</head>
<body>
123...<img src="C:\Users\Public\Pictures\Sample Pictures\florida-orlando-resort.jpg"
style="width:100px; height:100px; display:cover;">...456
</body>
</html>
1. Use a single Forward-slash / like C:/Folder/Images/image.jpg (preferred)
2. Escape your backslashes \\ like C:\\Folder\\Images\\image.jpg
Theoretically you should escape also the backslashes that you use in image's src:
<img src="file://C:\\Folder\\Images\\image.jpg">
(or again use simply a single /).
Due to some accidents in programming history Windows paths uses \. You would normally access your image using: C:\Folder\Images\image.jpg.
Browser gateways tries to normalize that issue for you and looks like it works in HTML syntax. CSS style instead (I believe the way it's parsed) needs to follow the escaping directive for unwise characters (\) translating it to a Windows understandable path.
I encourage you to simply forget about \ and use it the way you'd do on a live server:
background-image: url("C:/Folder/Images/image.jpg");
and respectively in HTML
src="C:/Folder/Images/image.jpg"
An additional note is that you should preferably use lowercase folder names.
P.S: from file: environment on Windows (NTFS filesystem) an all-lowercase path might match the desired file, but the same might not work on a live server. Such mistake might lead to small headaches, so try always to use lowercase
Related
I am trying to get background images working for html output from a system I develop for. I can output the page correctly, but the background images do not correctly display when referencing a file on the local machine; however if I reference the same image from an external site it works correctly.
I have the html file saved at <USER_DOCUMENTS>\Test_HTML.html and the example local image saved at <USER_DOCUMENTS>\images\test_image.png. The image I am using for the example is this, but any suitable image that can be externally referenced should suffice.
Test_HTML.html
<html>
<head>
<style>
td{font-family:arial; font-size:12pt; border:solid black 1pt;}
.test_class{background-image:url(images\test_image.png); background-repeat:repeat; background-position:top left;}
</style>
</head>
<table>
<tr>
<td class="test_class" style="width:40pt">Baap</td>
<td class="test_class" style="width:60pt">Beep</td>
<td class="test_class" style="width:80pt">Biip</td>
<td class="test_class" style="width:100pt">Boop</td>
<td class="test_class" style="width:120pt">Buup</td>
</tr>
</table>
<hr/>
<img src="images\test_image.png"/>
</html>
When viewing this in a browser (tested in Chrome, Firefox & IE), the image below the horizontal rule displays correctly, but there is no background displayed in the table. However if url(images\test_image.png) is replaced with url(<EXTERNAL_FILE_LOCATION>) then the background images display correctly. The desired behaviour is to be able to use the local file and get the same output as when using an external file location.
I'm at a bit of a loss as to how to get this to work correctly on the local system, and any help would be appreciated.
Like, I mentioned in my comment above, "\" or backslash is generally used for referring to the absolute path of a path and is a Windows standard for referring to the location of files.
We make use of "/" or forward slashes as they are used to refer to the relative path with the current working file. So,
./ refers to the current working directory.
../ refers to the parent directory.
./images/ refers to a folder which is present in the same location as the working directory and likewise to access the files inside the folder, you put a forward slash to refer to it.
As for, why it worked when you used the backslash path inside the img tag but not in the css, I'm not really sure of. But it's not a good practice and definitely not the proper way of doing things. Hope, it helps.
Replace the slash '\' to '/'. URL's have to be in forward slash
Is it likely or possible for img tag, or any other to be parsed, when the < tag is several characters prior, or perhaps omitted? Would this happen in any notable HTML parsers?
For example
<div>$test</div>.
Where $test could be any string containing a >, but not a <. Such as img>, but not <img
Full disclosure: This question is specifically to see whether or not the comment I posted was correct.
You don't technically need either < or >. Load this up in IE, and it'll run a javascript alert. Not sure if it's possible without messing with the charset though.
<HTML>
<HEAD>
<META charset="UTF-7">
</HEAD>
<BODY>
<DIV>+ADw-script+AD4-alert(+ACI-XSS+ACI-)+ADw-/script+AD4-</DIV>
</BODY>
</HTML>
Source: http://securityoverride.org/articles.php?article_id=13
Well, out of curiosity, I changed one of my test pages so its script section began with this:
< script>
The result was completely broken and just printed all of my javascript. This happened in IE9, GC28, and Firefox. I didn't really have an image on-hand to test with, but I think we can derive from this that HTML tags are always required to have no white-space between the angle bracket and tag declaration.
If you'd like even further confirmation, I suggest you browse the W3C standardization documents to see if you can find where they declare the generic pattern for HTML element tags. Many HTML parsers probably base themselves off those documents to ease their coding.
White space is allowed after the tagname
< script> is invalid
while
<script> is valid
Hi recently I found this bug in my code.
this link "http://www.zendez.com/beta/files/retreatphotos/larges/idretreat70/Mayacamas Ranch, Calistoga, California_ Paradise with a Purpose.jpg" is safe if I use it with
<img scr="http://www.zendez.com/beta/files/retreatphotos/larges/idretreat70/Mayacamas Ranch, Calistoga, California_ Paradise with a Purpose.jpg">
but is not valid well at least the image dont show if I use
<div style="background:url(http://www.zendez.com/beta/files/retreatphotos/larges/idretreat70/Mayacamas Ranch, Calistoga, California_ Paradise with a Purpose.jpg)" style="width:100%; height:300px"></div>
Does any know why if valid for img but invalid for background? any suggestion would be great.
Changing the url to http://www.zendez.com/beta/files/retreatphotos/larges/idretreat70/Mayacamas%20Ranch,%20Calistoga,%20California_%20Paradise%20with%20a%20Purpose.jpg will probably work..
As I said in the comment, your url is not properly urlencoded. Url's are not allowed spaces. I'm assuming that the browser's know how to handle poorly written src attributes of img tags but fail on css, most likely because you don't encapsulate the url in quotes like so:
background:url('http://www.zendez.com/beta/files/retreatphotos/larges/idretreat70/Mayacamas Ranch, Calistoga, California_ Paradise with a Purpose.jpg');
Either way, try to avoid spaces all together in filenames, you will end up with less of a headache.
Put your URL in quotes. That is ... you have:
background:url(http://yadda/yadda.jpg);
Change it to:
background:url('http://yadda/yadda.jpg');
When I do this, it works for me, both with spaces and with spaces replaced with %20. Always try to keep things simple in filenames. Punctuation and spaces may be handled badly by your filesystem or your programming environment.
Anyway, quotes are your friend.
Also, consider putting your style into tags rather than embedding it in-line.
<head>
<style type="text/css">
.foo {
background:url=('http://yadda/yadda.jpg') no-repeat;
}
</style>
</head>
<body>
<p class="foo">Hello, world.</p>
</body>
you shouldn't place two Style attributes in the div, considering the last style might not work correctly.
I have this html line
<body style ="background-color : pink;background-image : url('.\img\summer.jpg') ;" >
it works on IE8 but not firefox ,opera, google chrome or apple safari (only color shows)
I read many post with about this and tried all the solution still not working
on the other hand , if I stick to IE8
<table style="position:fixed;
left:25px;
top:250px;" border=1>
doesn't work , though it works on all the other browsers , see my problem .. I need to use bg image and fixed position together
any ideas ??
Try replacing the \ with /.
Forward slashes are the standard directory separator in HTML pages, and servers won't recognize backslashes. I guess IE converts them into forward slashes automatically.
<body style="background:pink url(img/summer.jpg);">
Concerning your background image, first use forward slashes in the URL that you are using, e.g. ./img/summer.jpg.
Second, remember that the URL of the image is relative to the file where the CSS is located (in this case, the HTML file).
<body background ="someimg.jpg" bgcolor="#33333" >
this should work. i have tested in chrome and it is working fine for me.
hope this helps
the IE 6 and below doesn't know position:fixed, but there are a lot of workaround (als google fore "IE position fixed") - this is just one of them i used some time ago.
to the background-image: i think the main problem here is using backslashes ( \ ) instead of "normal" slashes ( / ) - change that and i will work in other browsers, too.
I was toying around with the :before pseudo class in css, trying to insert a special character but the result is not what I was hoping for.
Using:
.read_more:before {
content: "»";
margin-right: 6px;
}
I get the character I want, but with an  character before it and using:
.read_more:before {
content: "»";
margin-right: 6px;
}
I get the complete » on the html page.
I can think of a couple of ways to solve my problem, but I was wondering what the correct syntax would be if I wanted to use the :before pseudo class.
By the way, my doctype is:
<!doctype html>
<html lang="en">
try this
.read_more:before {
content: "\00BB";
margin-right: 6px;
}
\00BB is the unicode representation of that character. It should reasonably works =)
The answer has been already told, but I want to refer to:
I get the complete » on the html page.
That's because CSS content property isn't treated as HTML. It's not appended to the DOM, therefore any HTML-specific markup isn't parsed. You can insert a character directly: content: "Ԃ"; or use Unicode notation: content: "\0504";.
Try specifying <meta charset="utf-8">. Ideally you want to set this in the server.
I know it's been a while since this question was asked but in case someone might need it nowadays, I found the solution for it.
Here's a chart with lots of glyphs. Find the one you want and copy the hex code for it.
Then paste it here to convert.
You'll get a value that looks like this: \00E1 (CSS Value)
Paste this value on your 'content:' and be happy :)
Your browser isn't using the correct text encoding -- that is, it isn't using the same text encoding as your editor. If you are receiving the page from a Web server, the best approach is to make sure the server is sending the proper Content-Type header. If you don't have control over the Web server's headers, or if you will be doing a lot of testing using local HTML files, add appropriate tags to your document for the encoding and HTML version you are using. I recommend using UTF-8. The CSS file (if it is separate from the HTML) should use the same encoding.
Add this on the html, inside the <head> section
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8" />
But if the html page is coded in PHP, I would prefer the following:
<?php
header("Content-Encoding: utf-8");
header("Content-type: text/html; charset=utf-8");
?>
And don't forget to save any file (css, html, php) with UTF-8 encoding