How do I set an image underneath the text using CSS?

HTML & CSS
1

I need to put the image in the css part.

I test all my codes on here that’s why it’s all together below. I separated them in the jsfiddle.
http://htmledit.squarefree.com/

Code

<style type="text/css"> 

.outer {
  max-width:466px;  /*466 */
  height: 88px;  /*98*/
  border: 5px solid #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 50px;
  font-family: georgia;
  text-align: center;
  padding-bottom: 0px;
  margin-top:2px;
  margin-bottom: 0px;
}

.hr3 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 2px;
  margin-left: 23px;
  margin-right: 24px;
}


  


</style>

</head>
<body>

<div class="outer">
    <p class="hr3">Text text text text<span></span></p>

<img src="https://i.imgur.com/BRJqTUw.png" style="border:solid 5px #38761d;vertical-align:middle;border-top:none; " width="466" /></a>

</div>

</body>
</html>
2

Do you mean you want to move the inline styles for the image into the style section, or that you want to insert the image as a background using CSS?

3

I did this but the image isn’t centered.

img {
border:solid 5px #38761d;
border-top:none;
vertical-align:middle;
}

</style>

</head>
<body>

<div class="outer">
    <p class="hr3">Text text text text<span></span></p>

<img src="https://i.imgur.com/BRJqTUw.png">
</div>

</body>
</html>

<style type="text/css"> 

.outer {
  max-width:466px;  /*466 */
  height: 88px;  /*98*/
  border: 5px solid #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 50px;
  font-family: georgia;
  text-align: center;
  padding-bottom: 0px;
  margin-top:2px;
  margin-bottom: 0px;
}

.hr3 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 2px;
  margin-left: 23px;
  margin-right: 24px;
}

img {
border:solid 5px #38761d;
border-top:none;
vertical-align:middle;
}


  


</style>

</head>
<body>

<div class="outer">
    <p class="hr3">Text text text text<span></span></p>

<img src="https://i.imgur.com/BRJqTUw.png">

</div>

</body>
</html>
4

OK - that’s nearly right. If you want both the text in the paragraph .hr3 and the image to be centered, then remove text-align: center; from the rules for .h3r and add it instead to the rules for .outer.

Both the paragraph and the image are contained within .outer, so the text-align rulee will apply to them both.

5

6

Sorry - that tells me nothing.

7

The image still ins’t centered

8

Have you changed the code as I suggested? I can’t tell what code you’re using from a picture.

9 
<style type="text/css"> 

.outer {
  max-width:466px;  /*466 */
  height: 88px;  /*98*/
  border: 5px solid #38761d;
  background-color: #000;
  text-align: center;
  margin: 0 auto;  /* top+bottom  left+right */
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 50px;
  font-family: georgia;
  padding-bottom: 0px;
  margin-top:2px;
  margin-bottom: 0px;
}

.hr3 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 2px;
  margin-left: 23px;
  margin-right: 24px;
}

img {
border:solid 5px #38761d;
border-top:none;

}

</style>

</head>
<body>

<div class="outer">
    <p class="hr3">Text text text text<span></span></p>

<img src="https://i.imgur.com/BRJqTUw.png">

</div>

</body>
</html>
10

yes / yes

11

What if I put a margin on the image?

12

I don’t think its margin.

13

What if you just have patience for a moment, rather than just posting wild guesses and making your thread harder to follow? Give me a chance to look at it.

14

Will this work?

Removing

margin-bottom: 0px;

from .hr3 {

or do I need that?

15

OK. You have height: 88px; on .outer, but that’s nonsense if you want it to also contain the image, so remove that rule.

Now remove the border:solid 5px #38761d; rule from the image. (The image is contained within .outer, which already has a border.

Add the width and height back into the HTML for the image. (Don’t add them as styles; add them as width="466", `height=“355”.)

I need help adding text to the Image CSS
16

This centers is, but I don’t think negative margins are meant to center images, but maybe in this instance it does.
margin-left: -5px;

17

Once again, stop guessing. Now read my post above.

18

I have to save the code first before you make me destroy it.

19

I want the text to have it’s own border.

I want the image to have it’s own border.

20

Like this:

<style type="text/css"> 

.outer {
  max-width:466px;  /*466 */
  height: 88px;  /*98*/
  border: 5px solid #38761d;
  background-color: #000;
  text-align: center;
  margin: 0 auto;  /* top+bottom  left+right */


}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 50px;
  font-family: georgia;
  padding-bottom: 0px;
  margin-top:2px;
  margin-bottom: 0px;
}

.hr3 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 2px;
  margin-left: 23px;
  margin-right: 24px;
}

img {
border:solid 5px #38761d;
border-top:none;
margin-left: -5px;
margin-top:27;
}

</style>

</head>
<body>

<div class="outer">
    <p class="hr3">Text text text text<span></span></p>

<img src="https://i.imgur.com/BRJqTUw.png" width="466" height="355">

</div>

</body>