ansaurus

Question

Make the image go behind the text and keep it in center using css

Answer 1

+1 A:

try

body {z-index:0}
img.center {z-index:-1; margin-left:auto; margin-right:auto}

setting the l & r margins to auto should center your image.

ScottSEA 2009-07-07 18:26:13

You shouldn't use a negative z-index because not all browsers properly support it.

Ian Elliott 2009-07-07 18:36:19

Answer 2

+1 A:

You can position both image and 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.

anderstornvig 2009-07-07 18:30:34

Answer 3

+6 A:

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>

Emily 2009-07-07 18:34:59

i tried your code .. but it did not work. i have edited my question with my code.. could you please have a look at it... again

Zeeshan Rang 2009-07-07 19:01:36

You have id='container' but are using .container which is for a class. Either use class='container' in the html or #container in the CSS. You are also missing the background-position:center in the CSS. You can put all the background CSS in one line like in my example above.

Emily 2009-07-07 19:13:52

Shame you got short-changed on this one ):

Ian Elliott 2009-07-07 21:24:42

Answer 4

+1 A:

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.

Rahul 2009-07-07 18:35:26

Answer 5

+2 A:

Well, put your image in the back ground of your website/container and put whatever you want on top of that. so say you have:

<div id="container">
   <input name="box" type="textbox" />
   <input name="box" type="textbox" />
   <input name="submit" type="submit" />
</div>

This is be in your code and you CSS would look like:

#container {
    background-image:url(yourimage.jpg);
    background-position:center;
    width:700px;
    height:400px;
}

For this to work tho, you must have height and width specified to certain values (i.e. no %'s) I could help you more specifically if you needed it, but I'd need more info.

Mike 2009-07-07 18:39:24

ansaurus

tags:

views:

answers:

Make the image go behind the text and keep it in center using css

related questions