I have some very basic HTML and CSS and it's got to the point now where I'm sure my code is fine (or at least to my eyes), and the images load in their respective fields. But as soon as I hit refresh they vanish.
I'm using Coda 2 which uses the Safari browser for a preview. All of my code is below:
<!DOCTYPE html>
<html>
<head>
<title>Input Images</title>
<link rel="stylesheet" type="text/css" href="css/input-image.css" />
</head>
</head>
<body>
<form>
<input type="text" id="email" />
<input type="text" id="twitter" />
<input type="text" id="web" />
</form>
</body>
</html>
input {
font-size: 120%;
color: #5a5854;
background-color: #f2f2f2;
border: 1px solid #bdbdbd;
border-radius: 5px;
padding: 5px 5px 5px 30px;
background-repeat: no-repeat;
background-position: 8px 9px;
display: block;
margin-bottom: 10px;}
input:focus, input:hover {
background-color: #ffffff;
border: 1px solid #b1e1e4;}
input#email {
background-image: url("images/email.png");}
input#twitter {
background-image: url("images/twitter.png");}
input#web {
background-image: url("images/web.png");}
It must be some issue on how the IDE handle assets paths.
Using absolute paths (which is the right way) should work: url("/images/email.png").