OneCompiler

Some property of css

1624

<!DOCTYPE html>

<html>

  <head>
    <title>Hello, World!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section>
      <div id="one">1</div>
      <div id="two">2</div>
      <div id="three">3</div>
    </section>
  </body>
</html>
 
style.css
body {
  margin: 25px;
}
div {
  width: 200px;
  height: 50px;
  background-color: green;
  text-align: center;
  border: 2px solid black;
  margin: 10px;
}
div:nth-of-type(2) {
  background-color: yellow;
}
div:nth-of-type(3) {
  background-color: skyblue;
}
#one {
  height: 300px;
  width: 200px;
  background-image: 
  url("https://assets.onecompiler.app/42s86yg6h/42s85rrqx/Screenshot_2024-09-14-22-46-35-95_1c337646f29875672b5a61192b9010f9.jpg");
  background-size: cover;
  box-shadow: 2px 2px 8px skyblue;
}
#two {
  height: 300px;
  width: 300px;
  background-image: url("https://assets.onecompiler.app/42s86yg6h/42s85rrqx/dog.jpg");
   background-size:cover ;
  box-shadow: 2px 2px 10px limegreen;
}
#three {
  height: 300px;
  width: 200px;
 margin: 40px;
 box-shadow: 2px 2px 10px green;
 background-image:
           url("https://assets.onecompiler.app/42s86yg6h/42s85rrqx/cat.jpg")
          ,url("https://assets.onecompiler.app/42s86yg6h/42s85rrqx/dog.jpg");
   background-size: contain;
}