Placing image to the left of a block

[Gandalf]

I’m trying to place an image to the left of a block of text. I know I could float it or use flex or other techniques, but I thought using the pseudo-element ::before might do the trick.

I’m missing something obvious, I’m sure, as the before part is above the block of guff.

This is my pen: https://codepen.io/gandalf458/pen/qBNOqxg

[Erik_J]

@Gandalf

I thought using the pseudo-element ::before might do the trick.

Just the same, you would still need to use float or flex or other techniques to arrange the position.

Mind the other elements are block, they goes under by default.

[coothead]

Hi there Gandalf,

instead of…

body {
  max-width: 40em;
  margin: 0 auto;
}

.contact {
  margin-left: 280px;
}

.contact::before {
  display: inline-block;
  content: url(https://www.webdesignpaciano.com/mf/images/contact.jpg);
}

…try…

.contact {
  max-width: 40em;
  padding-left: 16em;
  margin-left: 17.5em;
  background-image: url(https://www.webdesignpaciano.com/mf/images/contact.jpg);
  background-repeat: no-repeat;
}

coothead

[Gandalf]

Well, a background image is certainly easier!

[Erik_J]

@Gandalf

background image

@coothead has a point, but at first thought I would object that the difference is the content.

Background doesn’t appear in the HTML but on the other hand neither does a pseudo element.

So the question is if the image is content, it can’t be neither?

[Gandalf]

I think the image is just decoration.