Forum Moderators: not2easy
If you have a yahoo.com login account to read your emails you allways see a background rectangular under the login field which i suppose is a background image. Can someone tell me how to use CSS to make it?. If it is done by means of another program i am very greatful to ko know how. Please put me on right track to do that.
Kind regards.
[w3.org...]
you allways see a background rectangular under the login field which i suppose is a background image. Can someone tell me how to use CSS to make it?
swa66 is correct that there umpteen ways to go at this. That makes the question a little tougher from the view that you don't have a sample to build/improve from. swa66 will forever send you to the relevant W3C guidelines because that is the basis of really learning and understanding CSS. From there, you can search sites that will do more to provide 'working samples'.
Below is a very simple sample that will put a background-image: inside a Username input field. Note that I have used a class for this input called 'uname'. This helps me control the use of the background-image: It will only show up with an input where I specifically ask for that class. If unclassed - then no background-image:. You don't have to do this, but it is safer and gives you more control. Note also, that I have specified a color for the background as well. This is good practice because it may take that image a second or two to load and I don't want it POPPING into place on the page. The color, selected to closely match that of the image, will render instantly. Thus, if the image is 'late to the party', the impact of the image showing up is less disconcerting to the user.
Read the W3C guidelines carefully. They are the basis of everything. Understanding the properties, what they can do, what they can't do - is essential to making use of code samples. If you don't learn the W3C guidelines, using and tweaking samples won't actually teach you that much. The page will work - but you couldn't open Notepad and code it from scratch. That should be a goal if you are going to work with a lot of CSS.
For example, in my sample, you could replace the color and image filename, plug into a page and be in business. But you won't know anything. Better to study the guidelines, create a sample that doesn't work, do your best with it, then come back with the sample having already learned a lot (good and bad practices), and then getting help learning more when your sample code is whipped into shape.
<!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" xml:lang="en">
<head>
<title>
</title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen" />
form {
margin: 10% 0 0 10%;
}
input.uname {
background: red url(aaa.jpg);
}
</style>
</head>
<body>
<div>
<form method="" action="" name="">
<label for="username">Username</label>
<input type="text" name="login" id="username" value="" size=" 25" class="uname" />
</form>
</div>
</body>
</html>
<edit>Grammar</edit>
<edit>Creaky fingers today:))</edit>
