Member Avatar for nikc121

Ive got my form layout, but I would like to add a really cool background image to make the form snap. But it will not show up. Here is my style and html, had to validate strict. Thanks in advance....

<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 ="img">
<img src ="../images/red.jpeg" />
</div>


<div id="form">
<form enctype="text/plain" method="get" action ="mailto:nikc121@aol.com">
<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>

Here is the style

form            {background-color: #c0c0c0}



#img            {background-image: url ("../images/red.jpeg/") width= "100%" length="100%"}

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}
  • 5 Contributors
  • 6 Replies
  • 143 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by JRM

Recommended Answers

All 6 Replies

Member Avatar for helioptra

Ive got my form layout, but I would like to add a really cool background image to make the form snap. But it will not show up. Here is my style and html, had to validate strict. Thanks in advance....

There are too many good tutorials on the web to miss, just google "css watermark"
The way your code is setup, it would depend on if your writing for one browser, or all of them. Most browsers can handle PNG images except internet exploder,,,I mean explorer. I have found using .png images and some css code worked with all browsers except IE . I haven't tried lately with IE 9 though. Welcome to lets all do it our own way school of thought....

Peace

Member Avatar for teedoff

Have you tried adding the background image to the form div?

Member Avatar for ko ko 
#img {background-image: url ("../images/red.jpeg/") width= "100%" length="100%"}

This is not valid CSS. And '.jpeg' should be '.jpg'.

Member Avatar for teedoff

If you want an image in your form div, you need to give the form div an image background.

As you have it now, it looks like you created a div "img" and closed it before your form div even begins. Also, you dont even need to use "img" as a div name. You can style the "img" attribute the same as you would the <p> tag if needed.

Member Avatar for JRM

Teedoff is correct.
I just want to add that the form must be enclosed by the img div

<div id ="img"> <!-- style this with the background in CSS -->


... all code in between ...

</fieldset>


</form>
</div>
</div> <!-- this is the closing of the img div -->
</body>
</html>
Member Avatar for JRM

Is this thread solved? Please mark it as such, if it is.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.