CODEWITHSUNDEEP
htmlcss
Diaconescu
Diaconescu

Reputation: 41

How do I put text over the picture?

I have this Website

HTML:

.lista_sus li {
  display: inline-block;
  position: relative;
  margin: 0 9px 5px 0;
  background-color: #041067;
}
.lista_sus li p {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
}
.hide {
  display: none;
}
<ul class="lista_sus">

  <li>
    <img src="./wp-content/themes/twentyfourteen/images/1.png" alt="Smiley face" height="250" width="250">

    <p class="hide">
      <div class="title">Zorica L. Codoban
        <br>avocat
        <br>
      </div>

      - Avocat din anul 1997
      <br>- domenii de specialitate: drept civil, drept comercial, drept succesoral, drept imobiliar, dreptul muncii, drept administrativ, dreptul familiei;
      <br>- limbi vorbite: franceza.
    </p>
  </li>

I want to position text over the image ... I did some testing we have found here in the forum but not working.

How can i solve this problem? Can you help me please?

Thanks in advance!

Upvotes: 1

Views: 82

Answers (5)

web2tips
web2tips

Reputation: 191

Here is a working example

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  ul li {
    display: block;
    background-color: blue;
    color: #fff;
  }
  ul li img {
    width: 500px;
    position: absolute;
    z-index: 10;
  }
  ul li p {
    position: absolute;
    z-index: 100;
    padding: 15px;
  }
<ul>
  <li>
    <img src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg" alt="">
    <p>
      Avocat din anul 1997
      <br>domenii de specialitate: drept civil, drept comercial, drept succesoral, drept imobiliar, dreptul muncii, drept administrativ, dreptul familiei;
      <br>limbi vorbite: franceza.
    </p>
  </li>
</ul>

Upvotes: 1

CreativeCreator
CreativeCreator

Reputation: 230

  .picture {
    background: url("http://www.wallpaperup.com/uploads/wallpapers/2012/09/07/13037/big_thumb_97f1fdc4221e259ac57c475977627b9d.jpg") no-repeat center center fixed;
    background-size: 100%;
    display:inline-block;
  }
<div class="picture">TEXT HERE</div>

Upvotes: 1

jbutler483
jbutler483

Reputation: 24559

Option1: Use background Image

You could set the image in the background of a div, and have text within the image:

div {
  display: inline-block;
  height: 300px;
  width: 300px;
  background: url(http://placekitten.com/g/300/300);
}
<div>This is some text</div>

Option2: Use Positioning

You could use a wrapper div (position: relative), and position the text and image accordingly (position: absolute):

.wrap {
  position: relative;
  height: 300px;
  width: 300px;
}
.text,
.wrap img {
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 300px;
}
.text {
  z-index: 8;
}
<div class="wrap">
  <div class="text">This is some text</div>
  <img src="http://placekitten.com/g/300/300" />
</div>

Upvotes: 1

Huy
Huy

Reputation: 109

Create HTML background Image

Or change structure for HTML code and use float for this.

Upvotes: 2

Tony Gustafsson
Tony Gustafsson

Reputation: 888

Usually you make a div with position relative. And in it you have a img, and a text element that is absolute positioned where you wan't it.

Upvotes: 0

Related Questions