HTML/CSS: Changing CSS declaration on another HTML file?

January 4, 2023

I have an index.html file. I am trying to add another HTML file that uses the same CSS file. The problem is I have to change one of the CSS declarations for the new HTML but do not know how to.

index.html CSS

#bg {
  -moz-animation: bg 60s linear infinite;
  -webkit-animation: bg 60s linear infinite;
  -ms-animation: bg 60s linear infinite;
  animation: bg 60s linear infinite;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* Set your background with this */

  background: #348cb2 url("images/bg.jpg") bottom left;
  background-repeat: repeat-x;
  height: 100%;
  left: 0;
  opacity: 1;
  position: fixed;
  top: 0;
  filter: brightness(50%);
}

Let’s say I’m trying to make index2.html with another background image like

background: #348cb2 url("images/anotherImage.jpg") bottom left;

Is there any way to do something like this without adding another CSS file?
Or change it with Javascript?

>Solution :

You can use the same CSS file but define a different id for your second index.html. Something like

.bg-common {
  -moz-animation: bg 60s linear infinite;
  -webkit-animation: bg 60s linear infinite;
  -ms-animation: bg 60s linear infinite;
  animation: bg 60s linear infinite;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* Set your background with this */
  background-repeat: repeat-x;
  height: 100%;
  left: 0;
  opacity: 1;
  position: fixed;
  top: 0;
  filter: brightness(50%);
}
#bg1{
  background: #348cb2 url("images/bg.jpg") bottom left;
}
#bg2{
  background: #348cb2 url("images/anotherImage.jpg") bottom left;
}

Now you can use bg1 in index.html and bg2 in index2.html. .bg-common can be used with both files