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.
Related
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.
html code goes like this in my jsp file
<div class="itemadd">
<div class="blur">
</div>
</div>
the css code is:
.itemadd {
position: relative;
width: 100%;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(image/home.jpg);
background-size: cover;
}
.blur {
width: 100%;
height: 100vh;
backdrop-filter: blur(8px);
}
I have checked the names of file and folder correctly and there is no typing mistake while writing the code.
However, if I try to add background image implicitly through html code it works but that causes problem as I am not able to add linear-gradient property.
I also, coded it in VS CODE and it works perfectly there, but the same doesn't in JSP eclipse
Edit:
I tried to write my css code like:
.itemadd {
position: relative;
width: 100%;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('./image/home.jpg');
background-size: cover;
}
.blur{
width: 100%;
height: 100vh;
backdrop-filter: blur(8px);
}
still the problem didn't get resolved. I am attaching the folder structure of my project. The css file I am working on is menuadd.css (It is highlighted in the folder). My css is connected to my html page. All css code is working fine, except for the code I have written above.
Before trying the solution Go through the below image and the Link Provided.
Reference Link: https://www.w3schools.com/css/css_howto.asp
Note: Understand the hierarchy firstly as the jsp/html page are with the webapp folder, image folder contains images,css folder contains css file,
'image/home.jpg' URL will work in jsp and html pages as they are not stored in any sub folder,but when you try access image from css folder the hierarchy changes , you are accessing image folder from css folder,so firstly you have come out css folder(1 Level Up) which is denoted by '../'
Try This:
Inside menuadd.css :
.itemadd {
position: relative;
width: 100%;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../image/home.jpg);
background-size: cover;
}
.blur {
width: 100%;
height: 100vh;
backdrop-filter: blur(8px);
}
Inside Jsp:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link rel="stylesheet" href="css/menuadd.css">
</head>
<body>
<div class="itemadd">
<div class="blur">
</div>
</div>
</body>
</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);
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);
}
Helow guys, i tried z-index and other positioning to put the background color with transparency on the front after the background image, however i failed. Can anyone suggest an idea to solve the issue. Thanks you so much.
body,
html {
margin: 0;
padding: 0;
}
html {
background-image: url(https://i.stack.imgur.com/cEz3G.jpg);
background-size: cover;
background-repeat: no-repeat;
}
body {
background-color: rgba(201, 76, 76, 0.5);
z-index: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jury Portfolio</title>
</head>
<body>
</body>
</html>
Add 100% height on body and html. The issue was your body element taking 0 height. Hence the background-color was not visible.
No need for z-index since body is already a child of html.
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
html {
background-image: url(https://i.stack.imgur.com/cEz3G.jpg);
background-size: cover;
background-repeat: no-repeat;
}
body {
background-color: rgba(201, 76, 76, 0.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jury Portfolio</title>
</head>
<body>
</body>
</html>
Use multiple background and no need to define height. Simply rely on background propagation:
html,body {
margin:0;
padding:0;
}
html {
background-image:
linear-gradient(rgba(201, 76, 76, 0.5),rgba(201, 76, 76, 0.5)),
url(https://i.stack.imgur.com/cEz3G.jpg);
background-size: 100px 100px,cover;
background-repeat: repeat,no-repeat;
}
Please Try This:-
body,
html {
margin: 0;
padding: 0;
}
html {
background-image: url(https://i.stack.imgur.com/cEz3G.jpg);
background-size: cover;
background-repeat: no-repeat;
background-color: rgba(201, 76, 76, 0.5);
}