#inner {background-image:url("");position:relative;}
#inner::after {content:"";background-image:url("");opacity:0.8;background-repeat:repeat;position:relative;}

The above code works, only because #inner has a background-image. If I make #inner have a background-color of orange the after pseudo-element after doesn't work ? How do I get ::after to work on a background image ?

You need to add

position:absolute;
z-index:1; 

for to make ::after pseudo-element to be visible.

You need to add

position:absolute;
z-index:1; 

for to make ::after pseudo-element to be visible.

Must I have a position ? It's just a background image !

And can I remove the background image from the #inner selector, I haven't had any positive workings when I remove it !

A background image is not an element, a background image gets applied to an element.

 

Fiirstly do not use ID's for styling.

 

For a psuedo element you do not need two colons you only need one:

.classname:after {

}

 

To position the psuedo element as an overlay (which I am assuming you are trying to do)

you need:

.className:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

There's no need to add a Z-index as the element will come later in the DOM so will automatically be layered over the top. Your background image url is empty.

Edited December 8, 201411 yr by rbrtsmith

A background image is not an element, a background image gets applied to an element.

 

Fiirstly do not use ID's for styling.

 

 

I know ID's are mostly used for JS purposes; I don't mind using them sparingly.

 

For a psuedo element you do not need two colons you only need one:

.classname:after {

}

 

 

 

I wasn't sure if one colon or two colons was causing the issue.

 

 

To position the psuedo element as an overlay (which I am assuming you are trying to do)

you need:

.className:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

There's no need to add a Z-index as the element will come later in the DOM so will automatically be layered over the top. Your background image url is empty.

 

 

It worked so I must use positioning for the element & pseudo element even if the positioning has no value as in top,right,bottom,left: 0 ?