0

I have been recently been trying to make a very simple but nice looking page to host a tic-tac-toe game for my up coming science fair as I am in 8th grade.I come across a design when I put an background-image under an background-color as it looks good. When I try to recreate the sinario in my gitlab repo it keeps on doing not what I thought. If you didn't understand by now I am quite a newbie.

If someone could give me a snipit of code or an idea of how to do it it would be appreciated.

I checked all over stack but I can't find a question similar so if it is repeated my appologies.

EDIT:Take out the source code

  • http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css?rq=1 – Paulie_D Oct 01 '16 at 17:51
  • 1
    I have attempted the code my self as I stated it above, ill bring an exerp of my code but it won't look good. Appreciate the help –  Oct 01 '16 at 17:53
  • 1
    You're in 8th grade, don't worry so much about the look of your code. :) Edit your original post and use the {} button to format your code so all the indents and wrapping come out correctly. Good luck! – MotoRidingMelon Oct 01 '16 at 17:56
  • Thank you really appreciate it –  Oct 01 '16 at 18:17

1 Answers1

0

body {
  margin: 0;
  background-color: rgba(100,0,0,.75);
}

div {
  width: 100vw;
  height: 100vh;
  background-image: url("https://media.starwars.ea.com/content/starwars-ea-com/en_US/starwars/galaxy-of-heroes/news/_jcr_content/ogimage.img.jpg");
  opacity: .5;
  background-repeat: no-repeat;
  background-size: cover;
}
<div></div>

I was not able to find a solution without at least one HTML element, but I hope this demonstrates clearly enough the ability to stack background-images and background-colors with opacity values.

StardustGogeta
  • 3,331
  • 2
  • 18
  • 32
  • I was trying the code out today and I noticed everything I typed was behind the transparent background-color or just behind the image, any way I could make the words and everything be in-front of the two background elements. –  Oct 02 '16 at 14:39
  • @Smail Change the `z-index` values so that the backgrounds stay behind the rest of the elements. – StardustGogeta Oct 02 '16 at 15:05
  • @Smail Glad to help! – StardustGogeta Oct 03 '16 at 22:48