background image

Cant display background image behind my form

Page 1 of 1

3 Replies - 4147 Views - Last Post: 01 October 2010 - 08:44 AM

#1 nikc121  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 133
  • Joined: 12-April 10

background image

Posted 29 September 2010 - 06:25 PM

So finally got the form done. Now I would like to add this really cool background image that will appear behind the form. Ive tried everything, but it wont show up. please help
<styles>form            {background-color: #c0c0c0}


form            {width: 500px; margin:50px 250px; border: 3px solid #000000;}
fieldset        {margin: 5px; padding: 5px;}
legend            {margin-left: 1em; color:#000000; font-weight: bold;}
label.blockLabel    {display:block; position: relative; margin: 5px;}
label.blockLabel input    {position: absolute; left: 100px;}
label.indentLabel    {margin-left: 100px;}

#form span    {color: red}

#firstName, #lastName, #street        {width: 25em;}
#city, #email                {width: 15em}
                    
#state                    {width: 2em}
#zip                    {width: 7em}


<html>head>

<title>John Rogers Web Design</title>
<link href= "./styles/formstyle.css" rel= "stylesheet" type= "text/css" />

</head>

<body>
<p>
    <a href= "../index.html">Home</a>
</p>




<div id="form">
<form enctype="text/plain" method="get" action ="mailto:[email protected]">
<fieldset>
    <legend>Home/Business Address</legend>
<span>*</span>Indicates Reguired Information
    <fieldset id ="addressOption">
    <legend>Address For</legend>
    <label for="homeType">Home</label>
    <input type="radio" id="homeType" name="homeType" value="home" />
    <label for="businessType">Business</label>
    <input type="radio" id="businessType" name="businessType" value="business" />

</fieldset>

    <label class="blockLabel">
    First Name<span>*</span>
    <input type="text" id="firstName" name="firstName" />
    </label>

    <label class="blockLabel">
    Last Name<span>*</span>
    <input type="text" id="lastName" name="lastName" />
    </label>

    <label class="blockLabel">
    Street Address<span>*</span>
    <input type="text" id="street" name="street" />
    </label>

    <label class="indentLabel">
    City<span>*</span>
    <input type="text" id="city" name="city" />
    </label>

    <label class="indentLabel">
    State<span>*</span>
    <input type="text" id="state" name="state" maxlength="2" />
    </label>

    <label class="indentLabel">
    Zip<span>*</span>
    <input type="text" id="zip" name="zip"  maxlength="10"/>
    </label>
</fieldset>

<fieldset>
    <legend>Phone Number</legend>
<fieldset>
    <legend>Phone For</legend>

    <label for="houseType">Home</label>
    <input type="radio" id="houseType" name="houseType" value="house" />
    <label for="workType">Work</label>
    <input type="radio" id="workType" name="workType" value="work" />
    <label for="mobileType">Mobile</label>
    <input type="radio" id="mobileType" name="mobileType" value="mobile" />
</fieldset>

    <label class="blockLabel">
    Phone<span>*</span>
    <input type="text" id="phoneNumber" name="phoneNumber" />
    </label>
    
    <label class="blockLabel">
    Email<span>*</span>
    <input type= "text" id="email" name="email" />
    </label>

</fieldset>

<fieldset>
    <legend>Select Newsletter Interest</legend>
    
    <label class="blockLabel">
    (Hold down Ctrl to select more than one)
    <select id="newsletter" size="7" multiple = "multiple">
    <option>Web Design Tips</option>
    <option>Multimedia Tips </option>
    <option>Image Editing Tips </option>
    <option>Accessibility Tips </option>
    <option>Usability Tips </option>
    <option>Information Architecture Tips </option>    
    <option>No Thank You</option>
    </select>
    </label>
</fieldset>

<fieldset>
<legend>Comments/Suggestions</legend>
<label>Please Leave Feature Tips for future Newsletters</label>
<label class="blockLable" for ="comments"></label>
    <textarea id="comments" rows="10" cols="50"></textarea>

    <input type="submit" value="Submit" />
    <input type="reset" value="Clear" />
    
</fieldset>


</form>
</div>

</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: background image

#2 husseycoding  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 52
  • View blog
  • Posts: 174
  • Joined: 23-June 10

Re: background image

Posted 29 September 2010 - 11:46 PM

Hi nikc121,

I can't see that you have event defined an image anywhere in that code? There are also quite a few problems with it, missing tags, incomplete tags. Is this the actual code you are using or is some missed out?
Was This Post Helpful? 0
  • +
  • -

#3 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: background image

Posted 30 September 2010 - 12:45 AM

-- wrong thread :( --

This post has been edited by PhunkRabbit: 30 September 2010 - 12:46 AM

Was This Post Helpful? 0
  • +
  • -

#4 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 209
  • View blog
  • Posts: 989
  • Joined: 28-February 09

Re: background image

Posted 01 October 2010 - 08:44 AM

In the top part with the css you are going to want to use the background feature that css provides for you. In order to use this simply modify your css code that is pertaining to the table. ie:
form         {width: 500px; margin:50px 250px; border: 3px solid #000000;}

which should be displayed:
form{
    width: 500px;
    margin:50px 250px;
    border: 3px solid #000000;
    background: url("images/table_background.png") no-repeat;
}

take a look into manipulating backgrounds. You can have it off set using an X and Y value, repeat x or repeat y along with a few other fun tricks.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1