CSS Image Layers

Can you go with this sort of HTML structure instead:

<div class="layer one">
 ...
</div>
<div class="layer two">
 ...
</div>
<div class="layer three">
 ...
</div>
<div class="layer four">
 ...
</div>

?

Then you can just float the guys left as demonstrated here https://cssdesk.com/feumk .

Use # instead of .

Additionally, in most cases CSS classes are not case sensitive, but you may want to capitalize the L in the code just in case.

Afraid you’ve lost me, apologies all I know has been learned from google so far, so parts of the theory and jargon are a bit foreign to me.

What you’ve suggested certainly appears to get the images side by side which is an improvement. But I was looking to get some space between each one.

Other problem is, your example drops the main background image (black background with the band logo and instructions to click each of the above pictures.

Apologies if I’m missing something obvious.

No don’t go that route. Basically, the styling you’ve set up is not being called properly.

Use #Layer1 instead of .Layer1

I was only addressing your HTML layout.

For CSS spacing, see this tutorial: https://www.w3schools.com/css/css_margin.asp

Other problem is, your example drops the main background image

What do you mean, “drops”?
Anyway, I assume you can just move your main background image below your four guys (in HTML) to get it below it.

Tried the changes you’ve suggested:

php code is now:

<div class="Layer-1">
    <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-1.png">

.....etc

CSS now:

#Layer-1 {
  position: relative;
  left: +0px;
  top: +0px;
  width: 1500px;
  height: 900px;
  z-index: 1;
}
.....etc

Doesn’t seem to have made any change though:

https://www.klones.co.uk/sandbox/

(Out of curiosity why # instead of .?)

Sorry Andrew.

Drops as in, the example you provided didn’t have the background image in it so I wasn’t sure how that was supposed to be placed behind the rest of the images (i.e. was I on the right track with the z-index).

According to your sandbox, the div class your calling is still “layer1”, not “Layer-1”

Make them match EXACTLY the same. If you did and the site isn’t updating, that means you have either a cache plugin or a plugin that’s causing the site to cache.

And you can probably change the # back to .

I do have a cache plugin, I’ll clear it now and see what happens.

Thanks for your help.

I updated that CSSdesk page if you’re interested.

I am interested in anything that might make this work. Spent most of the day trying to get it working.

Had a look at the CSSdesk page and that is exactly the result I’m looking for.

Tried porting the code over to my pages and purged the cache but again no change. Still shows the images vertically one after each other.

Could it possibly be something to do with the rest of the code in the php file that’s throwing it off? Since it certainly has the intended result when you show it on CSSDesk.

Where are you putting the CSS?

Into a custom.css that I created so I didn’t mess up any of the code that comes with the theme.

Main css for the theme had this at the top:

*/
/*
WARNING! DO NOT EDIT THIS FILE!

To make it easy to update your theme, you should not edit the styles in this file. Instead use
the custom.css file to add your styles. You can copy a style from this file and paste it in
custom.css and it will override the style in this file. You have been warned! :)

Although those styles aren’t new versions of existing ones, they are completely new.

Try putting this in that custom.css file:

body {
 border: 10px solid red;
}

Does that appear?