0

Hi I am new to CSS and currently I am using only one image in my header as you can see here: 

#header {
    position: relative;
    background-image: url("../../images/header.jpg");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: #fff;
    text-align: center;
    padding: 7.5em 0 2em 0;
    cursor: default;
}

How can I add more images in the same header with transition effect in the same header only? I don't want to change the nomenclature in html of a header and want to control images through CSS

Estud
  • 23
  • 1
  • 6
  • I need to learn that and that's my question. Sorry if it was not clear. I used javascript but it did not work. – Estud Jun 11 '17 at 20:25
  • All clear. But sadly it's not possible. Not using background on a single element. – Roko C. Buljan Jun 11 '17 at 20:26
  • This might be useful : https://stackoverflow.com/questions/25799055/how-to-fade-loop-background-images – Roko C. Buljan Jun 11 '17 at 20:27

1 Answers1

0

You could use the :after and :before to overlay additional two layers and transition those layers using @keyframes and animation making up to maximally three fading backgrounds,

Otherwise it's not exactly possible in the header only without using additional children HTML...

Roko C. Buljan
  • 180,066
  • 36
  • 283
  • 292