How do you add a background image to a html/css form ? 2

c0deM0nK424 · Jul 7, 2013

i want to achieve what this website has done with a mini form

http://www.5ivestarlondon.com/

just a text field and a submit button aligned horizontaly at the bottom of the image, it looks nice.

I want to achieve this same thing folks but i dont know how to begin.

How do you do this ?? it seems, or appears more difficult than I thought it would be.

any css/html junkies wizkids out there who are willing to help ?

ChrisHirst · Jul 7, 2013

A background image and relative positioning.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

vacunita · Jul 8, 2013

Give your form a background image with CSS, and then simply adjust margins on your elements to push them down.
I wouldn't mess too much with positioning.

Personally something like:

Code:

[b][COLOR=#0000FF]<style[/color][/b] [COLOR=#009900]type[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"text/css"[/color][b][COLOR=#0000FF]>[/color][/b]

*
{
[tab]padding:0;
[tab]margin:0;
}

div.backgroundform
{
[tab]background-color:#0066de;
[tab]height:200px;
[tab]width:300px;
[tab]overflow:hidden;[tab]
}
div.backgroundform form
{
[tab]height:40px;
[tab]overflow:hidden;
[tab]margin-top:160px;
[tab]padding-left: 10px;
[tab]
}
div.backgroundform form input
{
[tab]margin-right:6px;
}



[b][COLOR=#0000FF]</style>[/color][/b]
[b][COLOR=#0000FF]</head>[/color][/b]
[b][COLOR=#0000FF]<body>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"backgroundform"[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<form[/color][/b] [COLOR=#009900]action[/color][COLOR=#990000]=[/color][COLOR=#FF0000]""[/color]...[b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<input[/color][/b] [COLOR=#009900]type[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"text"[/color][b][COLOR=#0000FF]><input[/color][/b] [COLOR=#009900]type[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"submit"[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]</form>[/color][/b]
[b][COLOR=#0000FF]</div>[/color][/b]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

c0deM0nK424 · Jul 9, 2013

Do you know something vacunita ?

we crossed paths many years ago on here - yet you really are a remarkably super smart praiseworthy coder [glasses]

thanks buddy - much appreciated. RELIABLE and PROFESSIONAL as always vacunita. Here, allow me to place this 'You ARE the Man' - 'virtual garland' around your neck lol

Now your raise your gold trophy skywards my boy !

* raptuous round of applause for vacunita *

lol

[thumbsup]

vacunita · Jul 9, 2013

Glad I could help. no need for all the praise. [thumbsup2]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How do you add a background image to a html/css form ? 2

c0deM0nK424

Programmer

ChrisHirst

IS-IT--Management

vacunita

Programmer

c0deM0nK424

Programmer

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor