Placing image to the left of a block

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

1 Like

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. :wink:

1 Like

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

2 Likes

Well, a background image is certainly easier! :blush:

@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?

:thinking:

2 Likes

I think the image is just decoration.

2 Likes