CODEWITHSUNDEEP
html
Broken
Broken

Reputation: 13

Mixing colours in html

I am looking for a way to put the background colour of my website as this colour without having to use a full sized image.

<!DOCTYPE html>
<html>
<body style="background-color:#b0e0e6;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  font-size: 17px;
}

.container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.container img {vertical-align: middle;}

.container .content {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}
</style>
</head>
<body>


<div class="container">
  <img src="images/youtube1.png" alt="Image of a phone with youtube on it" style="width:100%;">
  <div class="content">
    <h1>The History Of Youtube</h1>
    <p>Started by Jawed Karim, Steve Chen, and Chad Hurley, YouTube first launched in 2005 and has now become one of the most visited websites in the history of the internet. As employees of PayPal, the three soon realized, in 2004, that there wasn't one location where videos could be shared. Years later, Karim explained that it was the Janet Jackson Super Bowl incident as well as the tsunami in December that triggered the idea.</p>
  </div>
</div>

</body>
</html>

Image link: https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.xmple.com%2Fwallpaper%2Forange-pink-gradient-linear--c2-ff69b4-d8b04d-a-30-f-14-image%2F&psig=AOvVaw0ZdrAOKDkB9tViVXEdnmhC&ust=1582726670838000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKCgjbry7OcCFQAAAAAdAAAAABAJ

Upvotes: 1

Views: 90

Answers (1)

caramba
caramba

Reputation: 22490

You can use linear-gradient()

The title of your image says

Wallpaper orange pink gradient linear #ff69b4 #d8b04d 30°

which is all indication you need. You can write it like so in CSS

.background {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(30deg, #d8b04d, #ff69b4);
}
<div class="background"></div>

Upvotes: 3

Related Questions