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
  • 7
  • 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

2 Answers2

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
  • 196,159
  • 39
  • 305
  • 313
-1

you can do it by using background img : url("your url"). and you can add many images by using the same expression.

sonali
  • 762
  • 10
  • 23
Sangam Parmar
  • 1
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 16 '22 at 20:49