I have the following rules in my css stylesheet:
body {
background: url('../Pic/poly-parallax Half.png') fixed center no-repeat;
background-color: rgb(231,231,231);
width: 100%;
background-size: contain;
background-position: left;
}
.logo {
height: 275px;
background: url('Pic/Logo.png') fixed center no-repeat;
background-size: 275px 70px;
background-position: top right;
}
But the logo image is keep on being responsive although i defined it as fixed.
Here's the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="BSC1.css">
<title></title>
</head>
<body>
<div class="logo">
</div>
</body>
</html>
Examples:
zoom 100%:
zoom 200%:
The only thing you might want to change is the body's background-size from contain to cover to really fill the window (as I did below), but the logo does not change its size with those settings and always stays at the top right:
body {
margin: 0;
height: 100%;
background: url('https://placehold.it/1200x800/fa0') fixed center no-repeat;
background-color: rgb(231, 231, 231);
width: 100%;
background-size: cover;
background-position: left;
}
.logo {
height: 275px;
background: url('https://placehold.it/275x70/a0f') fixed center no-repeat;
background-size: 275px 70px;
background-position: top right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="BSC1.css">
<title></title>
</head>
<body>
<div class="logo">
</div>
</body>
</html>
Related
I'm trying to set a linear gradient color as background of my HTML page, but when I apply the CSS style instead to stretch to the all page it repeat as you can see in the picture below.
How can I solve this issue and why?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test BootStrap</title>
<link rel="stylesheet" href="index.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body class="body-page">
Hello
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
.body-page{
background-image: linear-gradient(blue,red);
}
You just need to add background-repeat: no-repeat; and background-attachment: fixed;:
.body-page {
background-image: linear-gradient(blue, red);
background-repeat: no-repeat;
background-attachment: fixed;
}
<body class="body-page">
Hello
</body>
you should use "background-repeat" , this will be your css file :
.body-page{
background-image: linear-gradient(blue,red);
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
}
I am beginning to learn CSS and Bootstrap 5. I have this code that doesn't display right.
HTML code:
body, html {
height: 100%;
}
body {
background-image: url('assets/images/expressway.jpg');
height: 100%;
background-color: #6cdb84;
background-blend-mode: darken;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#bg {
height: 100%;
width: 100%;
background-color: rgb(235, 240, 235);
clip-path: polygon(0 0, 100% 0, 100% 42%, 21% 100%, 0 100%, 0% 50%);
position: absolute;
z-index: -1;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TemplateUnmannedLcs</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div id="bg">
MY HEADER SECTION
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
Why is it that my div that has the id "bg" overshoots the container constraint. Isn't it that it should only go to the center and not overshoot to the end of the page. See the image below.
The beginning of the div that has the id "bg" starts out at the correct position but the end overshoots the container boundary. How do I fix this?
The desktop version looks good, but the mobile version is clipping the background. What I mean by this is that when I scroll it has the effect of two backgrounds.
I don't know if the problem is in the css or the html file.
body, html{
height: 1080px;
margin: 0;
padding: 0;
background: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js">
</script>
<link href="https://fonts.googleapis.com/css family=Montserrat:300,600,700i" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
Because you set background-image for two element (html and body). A simple webpage layout like this:
<html>
<head>
</head>
<body>
</body>
</html>
You can change the height value for the body, but not the html! The height value of HTML is always automatic. Therefore, after scrolling down 1080px, the body background ends and the html background is displayed. To solve the problem, just add the background to the body and remove height value.
body{
margin: 0;
padding: 0;
background-image: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
add this media code
#media screen and (max-width:500px){
body, html {
background-size:100% 100%;
}
}
You don't need to set bckgound for html and body. Only set the background for body.
body{ /* Remove html from this lie */
height: 1080px;
margin: 0;
padding: 0;
background: url("img/Mountain.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
pardon me if my question is stupid, I'm quick new to all these technologies. my objective is to add image-background in it default size while it doesn't zoom since it is a big size picture, the problem is when I add some styles, the image doesn't show up and background getting blank.
by the way, IM using particle.js on top of this background image.
<!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>Infinite Space !</title>
<link rel="stylesheet" href="style.css">
</head>
<body >
<div id="particles-js"></div>
//particle-js configues
<script src="https://cdn.jsdelivr.net/npm/particles.js#2.0.0/particles.min.js">
</script>
<script>
particlesJS.load('particles-js', 'particles.json', function() {
console.log('callback - particles.js config loaded');
});
</script>
</div>
</body>
</html>
#particles-js{
background: url("https://d14xs1qewsqjcd.cloudfront.net/assets/bg-header-star.jpg")
width: 100%;
min-height: 800px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
/* background-attachment: fixed;
}
You didnt add a semicolon after the background property:
#particles-js{
background: url("https://d14xs1qewsqjcd.cloudfront.net/assets/bg-header-star.jpg") /* <---- Semicolon goes here*/
width: 100%;
min-height: 800px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
/* background-attachment: fixed; /* Also you didnt close this comment */
}
When I place a div with a background-image property and use position: relative I end up with a white frame around the edge of the image which I do not want.
I cannot use absolute as I need an element to follow directly below the background image and scale on different resolutions (so no setting height/width in px).
Here's the CSS:
#pagehead{
position: relative;
background-position: center, center;
background-image: url("Header.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
top: 0;
bottom: 0px;
left: 0;
right: 0;
}
section{
position: relative;
}
Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="animate.js"></script>
<link rel="stylesheet" type="text/css" href="page.css">
</head>
<body>
<div id="pagehead"></div>
<section>
<div id="content">
blahblahblah
</div>
</section>
</body>
</html>
Setting the body's margin to 0 might fix the problem:
body { margin: 0px; }