I am creating a web page, where I have an image that I want to place in the center. On the top of that image I want to have input boxes, labels, and a submit button.
I am trying to use this CSS
img.center
{
z-index:-1;
}
but this does not work. When I change the code to
img.center
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
it makes the image go behind. But then as I used left:0px and top:0px ... it puts the image at location 0,0. But I want the image to stay in the center.
To keep the image in the center, I have added this: <div align="center">.
Is there any way, I can keep the image in the center and make it go behind the boxes, labes, and buttons too?
My HTML page looks like this (I tried to have a background image for my div tag, but no image is appearing on top of it):
<html>
<head>
<title>Question of the Week</title>
<style type="text/css">
body
{
background-image:url('images/background.jpg');
background-repeat:repeat-x;
}
.container
{
background-image:url('images/center.jpg');
background-repeat:no-repeat;
}
td.cntr {padding-top:50px;}
</style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div align="left"><img src="images/logo.jpg"></div></td>
<td></td>
<td><div align="right"><img src="images/right_logo.jpg"></div></td></tr>
</table>
</tr>
<tr>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="cntr">
<div id="container">
<input name="box" type="textbox" />
<input name="box" type="textbox" />
<input name="submit" type="submit" />
</div>
</td>
</tr>
</table>
</tr>
</table>
</body>
</html>
Try this code:
body {z-index:0}
img.center {z-index:-1; margin-left:auto; margin-right:auto}
Setting the left & right margins to auto should center your image.
Make it a background image that is centered.
.wrapper {background:transparent url(yourimage.jpg) no-repeat center center;}
<div class="wrapper">
...input boxes and labels and submit button here
</div>
Start at 0 and go up from there, rather than using -1. For instance, set the div containing your inputs and labels to a z-index of 100, and give the image you want to place behind it a z-index of 50.
Alternatively just set the image as the background-image of the div containing the inputs and labels. Since the image is probably illustrative and therefore presentational, it doesn't really need to be an actual img element.
I style my css in its own file. So I'm not sure how you need to type it in as your are styling inside your html file. But you can use the Img{ position: relative Top: 150px; Left: 40px; } This would move my image up 150px and towards the right 40px. This method makes it so you can move anything you want on your page any where on your page If this is confusing just look on YouTube about position: relative
I also use the same method to move my h1 tag on top of my image.
In my html5 file my image is first and below that I have my h1 tag. Idk if this effects witch will be displayed on top of the other one.
Hope this helps.
There are two ways to handle this.
The background image is probably easier. You need a fixed width somewhere.
.background-image {
width: 400px;
background: url(background.png) 50% 50%;
}
<form><div class="background-image"></div></form>
You can position both the image and the text with position:absolute or position:relative. Then the z-index property will work. E.g.
#sometext {
position:absolute;
z-index:1;
}
image.center {
position:absolute;
z-index:0;
}
Use whatever method you like to center it.
Another option/hack is to make the image the background, either on the whole page or just within the text box.
Source: Stackoverflow.com