Image in div with :after or :before?

Question

I'm trying to have a background image to the right of a div, which isn't covering the whole div.

Right now it's like this (div1 is background-color):

<div id="div1">
    <div id="image"></div>
    Text
</div>

CSS:

.div1 {
    background: #324458;
    color: #FFF;
    font-size: 0.9em;
    font-weight: bold;
    padding: 10px;
    width: 100%;
    position: relative;
    border-radius:4px;
    height:40px;
    clear:both;
    overflow: hidden;
}

.image {
    background: url("url here");
    background-position: center center;
    background-size: cover;
    opacity: 0.3;
    height: 39px;
    margin: -10px;
    width: 300px;
    position:absolute;
    right: 10px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 0;
}

But is it possible to have the image shown in it without having it as a div inside div1? Like using :after, :before or something else? I only want the div image to show to the right of div1 and be X width.

Do you have an image of what effect you are trying to achieve? — Paulie_D, Oct 17 '16 at 16:07
Yes....just use a positioned pseudo-element instead of the actual div. Nothing else needs changing. Oh...and remove the `overflow:hidden` — Paulie_D, Oct 17 '16 at 16:14

score 6 · Accepted Answer · edited May 03 '17 at 08:40

For an background image to show on pseudo-elements like ::after and ::before you should include content: ''; on them.

I've fixed (you were trying to target ids with class selectors) and added the mentioned background image on on this fiddle. But it goes like this:

.div1 {
  background: #324458;
  color: #FFF;
  font-size: 0.9em;
  font-weight: bold;
  padding: 10px;
  width: 100%;
  position: relative;
  border-radius: 4px;
  height: 40px;
  clear: both;
  overflow: hidden;
}

.div1::after {
  content: '';
  background: url("https://unsplash.it/200/300");
  background-position: center center;
  background-size: cover;
  opacity: 0.3;
  height: 39px;
  margin: -10px;
  width: 300px;
  position: absolute;
  right: 10px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  z-index: 0;
}

<div class="div1">
  Text
</div>

@P.Nick Your viewport is probably small, and because we're using ::before with background-image it gets displayed over the background of the first div. If you want the background-image to be relative to the width of the div1 you can [do the following](https://jsfiddle.net/lucaslazaro/eq9qd46s/2/) which is setting the width of the ::after to 50% of the parent or the ration you desire (you can always set a max-width [like this](https://jsfiddle.net/lucaslazaro/eq9qd46s/3/) if you want the image to stay at 300px on larger widths). — Lucas Lazaro, Oct 17 '16 at 16:27

score 1 · Answer 2 · edited May 23 '17 at 12:09

There are several ways to place an image to the right of a div. You should consider displaying the image with an image tag as follows:

Also, in your html you define ids, then in css you need to use # isntead of .. Check Difference between id and class in CSS and when to use it

A way to do this:

HTML:

<div id="div1">content</div>
<img id="image" src="url"/>

CSS:

#div1 {
   display:inline-block;
   float:left;
}

#img {
   float:left;
}

By default, div containers stretch their width all the way to match 100% the width of their parent container. Setting 'display:inline-block' will make it wrap their content and allow stacking different containers (including images) to the sides.

score 0 · Answer 3 · answered Oct 17 '16 at 16:22

This is a test of :before and :after, with which you can place text or an image before and after each HTML element.

p.test:before {
    padding-right: 5px;
    content: url(/pix/logo_ppk.gif);
}
p.test:after {
    font-style: italic;
    content: " and some text after.";
}

Image in div with :after or :before?

3 Answers3