How do I change the background to a linear-gradient background? - html

Hi I am new to html and css, and i am unable to to get a linear gradient background.
This is what i am trying to get:
https://i.stack.imgur.com/ewkO6.png
This is what i have so far
body{
background-color: linear-gradient( rgb(35, 166, 252), white);}
The HTML code is basically empty:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="aboutme.css" rel="stylesheet"/>
<title>Document</title>
<h1>ABOUT ME</h1>
</head>
<body>lorem ipsum</body>
</html>
Thank you.


use background-image:linear-gradient( rgb(35, 166, 252), white); instead of background-color
Your problem will be solved
so your css should be
body{
height: 100vh;
background-image: linear-gradient(rgb(35, 166, 252), white);
}


You could add this in your CSS code, with the following value:
background: linear-gradient(45deg, black, transparent);

Related

How can I create a gradient on a rectangular div with repeating lines at a 45 degree angle in opposite directions?

I want to create a gradient with lines moving in both directions, but at a 45 degree angle. with html and css.
How can I do the same lines, but in an opposite direction.
This is the code I used below to produce the image above.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.repeating-linear {
background: repeating-linear-gradient(
-45deg,
black 4px,
transparent,
transparent 10px
);
}
</style>
</head>
<body>
<div class="repeating-linear" style="width: 200px;height: 50px; border: 1px solid red;">
</div>
</body>
</html>

So you want cross lines, you can stack gradients as proposed below:
<div class='repeating-linear' />
.repeating-linear{
width: 200px;
height: 50px;
border: 1px solid red;
background:
repeating-linear-gradient(
-45deg,
black 4px,
transparent,
transparent 10px
),
repeating-linear-gradient(
45deg,
black 4px,
transparent,
transparent 10px
);
}
jsfiddle sample: https://jsfiddle.net/4rL7n8xo/
result:

How to make my extension html background full transparent

I have this white small box and i want to make him transparent before starting adding my html code, i searched already how to do that but i didnt find any type of example.
Image:
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<script type="text/javascript" src="./script.js" ></script>
</body>
</html>
CSS
* {
padding:0;
margin:0;
vertical-align:baseline;
list-style:none;
border:0
}
html {
background: transparent;
}
[EDIT]
CSS
html, body {
background: rgba(0, 0, 0, 0.01);
}
div {
width: 300px;
height: 300px;
background: rgba(0, 0, 0, 0.1);
/* border-radius: 16px; */
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(11.6px);
-webkit-backdrop-filter: blur(11.6px);
border: 1px solid rgba(0, 0, 0, 0.15);
}
Html
<!-- I added this div -->
<div>
TESTE
</div>

Please improve your question. If you want to make an element transparent with CSS, the easiest way is to add numbers from 0-9 to the end of the color value to get the transparency level you want, for example, white is #fff, to make it transparent experiment with #ffffff0, #ffffff1, #ffffff2, to 9.

Getting my background to appear in the live server

I cant get my background to open with the live server. I am not sure what I did wrong. I have attached both my index.html sheet and my style.css sheet. All that appears is a grey screen for my background instead of the image. I am going to put login information on top of the background thats why I used linear-gradient.
* {
margin: 0;
padding: 0;
}
.hero {
height: 100%;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url(123.jpg);
background-position: center;
background-size: cover;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Global Automation Timesheet</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="hero">
<div class="form-box"></div>
</div>
</body>
</html>

.hero {
height: 100%;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/123.jpg');
background-position: center;
background-size: cover;
position: absolute;
}
Use apostrophes '' in url('123.jpg'). Also be sure, that you correctly wrote image location.

Adding black transparency to an image [duplicate]

This question already has answers here:
How to add a color overlay to a background image? [duplicate]
(4 answers)
Closed 2 years ago.
This is how my webpage looks like:
I used the following image as the background:
How can I have black transparent overlay on the image, so it looks like the following:
Here is my html and CSS code:
<!DOCTYPE html>
<html>
<head>
<title>Background Image</title>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
body{
margin-top: 53px;
}
.jumbotron {
background-image: url("background1.jpg");
text-align: center;
height:522px;
background-size: cover;
}
</style>
<body>
<section id="page-top">
<div class="jumbotron">
<p data-aos="zoom-out" data-aos-delay="500" style="font: 120px Verdana,sans-serif; margin-top: 35px; color: black; animation-duration: 2s; animation-iteration-count:infinite; animation-delay: 1s;" class="lead pulse mb-5 green pb-5 aos-init aos-animate">Matt Williams</p>
<p data-aos="zoom-out" data-aos-delay="500" style="font: 20px Georgia,serif;font-style:italic; line-height: 1.6; color:white;animation-duration:2s;animation-iteration-count:infinite; animation-delay:1s;" class="lead pulse mb-5 lightGreen pb-5 aos-init aos-animate d-none d-lg-block">Lorem Ipsum.<br>Lorem Ipsum.</p>
</div>
</section>
</body>
</html>

You can add a transparent gradient before the url background:
.jumbotron {
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("background1.jpg");
}
For example:
body {
background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://picsum.photos/id/896/640/480);
}

Make a reverse arrow in a li CSS

I have a simple li on a page:
<li tabindex="0" id="lidashboard" class="active">
<a href="#/index/app/dashboard">
<i class="fa fa-dashboard fa-lg"></i>Dashboard
</a>
</li>
Is it possible, with CSS, to make it finish as an arrow on right side. Something like:
on hover li will have a right triangular border in white
Please help

You can do as follows
li{
list-style: none;
}
.arrow{
height: 100px;
width: 250px;
background-color: red;
}
.arrow:hover{
-webkit-clip-path: polygon(100% 0, 68% 50%, 100% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 68% 50%, 100% 100%, 0 100%, 0 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul>
<li class="arrow"></li>
</ul>
</body>
</html>
In order to play with clip-path values, look here.