Smail Barkouch Smail Barkouch - 2 months ago 7
CSS Question

How to stack two background images over each other

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.

<DOCTYPE html>
<html style="background-image:url(background-image:url(http://www.zingerbug.com/Backgrounds/background_images/beveled_indented_squares_seamless_wallpaper_background_black.jpg);">
<head>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
h1{
font-family:Oswald;
font-size:80px;
margin:90px;
text-align:center;
margin-bottom:0px;
font-color:white;

}
h2{
font-family:Oswald;
font-size:35px;
margin:20px;
text-align:center;
font-color:white;
}
.info{
border-left-style:solid;
border-width:5px;
border-color:lightblue;
background-color:gray;
opacity:.5;
}
</style>
</head>
<body style="background-color:blue;opacity:.5;">
<h1>Science Fair</h1>
<h2>Tic-Tac-Toe Project<hr></h2>
</body>
</html>


This isn't that complicated as I started this project a while ago. Also doesnt look to well.

Answer

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.

Comments