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

Question

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   lt div align  center  gt    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     lt html gt   lt head gt   lt title gt Question of the Week lt  title gt   lt style type  text css  gt      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    lt  style gt   lt  head gt   lt body topmargin  0  leftmargin  0  rightmargin  0  bottommargin  0  marginwidth  0  marginheight  0  gt        lt table width  100   border  0  cellpadding  0  cellspacing  0  gt           lt tr gt               lt table width  100   border  0  cellpadding  0  cellspacing  0  gt                   lt tr gt                       lt td gt  lt div align  left  gt  lt img src  images logo jpg  gt  lt  div gt  lt  td gt                       lt td gt  lt  td gt                       lt td gt  lt div align  right  gt  lt img src  images right logo jpg  gt  lt  div gt  lt  td gt  lt  tr gt               lt  table gt           lt  tr gt           lt tr gt               lt table width  100   border  0  cellpadding  0  cellspacing  0  gt                   lt tr gt                       lt td class  cntr  gt                           lt div id  container  gt                               lt input name  box  type  textbox    gt                               lt input name  box  type  textbox    gt                               lt input name  submit  type  submit    gt                           lt  div gt                       lt  td gt                   lt  tr gt               lt  table gt           lt  tr gt       lt  table gt   lt  body gt   lt  html gt

User · Answer

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.

User · Answer

There are two ways to handle this    Background Image Using z-index property of CSS   The background image is probably easier  You need a fixed width somewhere    background-image       width  400px      background  url background png  50  50          lt form gt  lt div class  background-image  gt  lt  div gt  lt  form gt

User · Answer

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

User · Answer

Try this code   body  z-index 0  img center  z-index -1  margin-left auto  margin-right auto    Setting the left  amp  right margins to auto should center your image

User · Answer

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

User · Answer

Well  put your image in the background of your website container and put whatever you want on top of that   Your container defined in HTML    lt div id  container  gt      lt input name  box  type  textbox    gt      lt input name  box  type  textbox    gt      lt input name  submit  type  submit    gt   lt  div gt    Your CSS would look like this    container       background-image url yourimage jpg       background-position center      width 700px      height 400px      For this to work though  you must have height and width specified to certain values  i e  no percentages   I could help you more specifically if you wanted  but I d need more info

User · Answer

Make it a background image that is centered    wrapper  background transparent url yourimage jpg  no-repeat center center     lt div class  wrapper  gt      input boxes and labels and submit button here  lt  div gt

[html] Make the image go behind the text and keep it in center using CSS

Examples related to html

Examples related to css