How do I make the background image looks like it's under the header?
https://public.brayzenchase.repl.co/
* {
margin: 0;
padding: 0;
}
header {
height: 100px;
width: 100%;
background-color: rgba(232, 238, 242, 0.3);
position: sticky;
top: 0;
border-bottom: 3px solid #37393A;
display: flex;
align-items: center;
justify-content: center;
}
section {
height: 100vh;
width: 100%;
background-image: url('https://public.brayzenchase.repl.co/IMG_0290.JPG');
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>Sticky Transparent Header</header>
<section></section>
</body>
</html>
Appending the background image to body will do the trick. You are appending it to section, which comes after the header.
* {
margin: 0;
padding: 0;
}
header {
height: 100px;
width: 100%;
background-color: rgba(232, 238, 242, 0.3);
position: sticky;
top: 0;
border-bottom: 3px solid #37393A;
display: flex;
align-items: center;
justify-content: center;
}
body {
height: 100vh;
width: 100%;
background-image: url('https://public.brayzenchase.repl.co/IMG_0290.JPG');
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>Sticky Transparent Header</header>
<section></section>
</body>
</html>
Related
https://www.youtube.com/watch?v=mxHoPYFsTuk&ab_channel=WebDevSimplified i followed this tutorial to make this parallax scrolling effect and after adding my own images, it doesnt work, does anyone know how to fix this?
video link: https://youtu.be/I7JoNXxYCSU
tried making a parallax scrolling website but random parts of the image disappeared
html, body {
margin: 0;
overflow: auto;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
header {
width: 100vw;
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.background {
transform: translateZ(-10px) scale(2);
}
.foreground {
transform: translateZ(-5px) scale(1.5);
}
.background,
.foreground {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
}
.title {
font-size: 7rem;
color: white;
text-shadow: 0 0 5px black;;
}
section {
font-size: 2rem;
padding: 2rem;
background-color: #333;
color: white;
}
<!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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<header>
<img src="https://gcdnb.pbrd.co/images/oPzai9kdxxVl.png" class="background">
<img src="https://gcdnb.pbrd.co/images/OotzTQMkzcbC.png" class="foreground">
<h1 class="title">Welcome!</h1>
</header>
<section>Lorem ipsum dolor sit amet pe?</section>
</div>
</body>
</html>
I'm trying to learn how to do parallax scrolling effect, watched some tutorials and tried one, but it's not working, any idea what might be wrong?
what shows is just static pictures, it doesn't have any parallax effect at all.
and I can't upload this post because it says my post is mostly code, i wish i can add some lorem here because i literally have no idea what kind of information to add more...
HTML CODE:
<!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 rel="stylesheet" href="css/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;500;700;900&display=swap"
rel="stylesheet"
/>
<title>Task 3</title>
</head>
<body>
<div class="parallax-wrapper">
<div class="single-parallax parallax parallax-bg-1">
<h1>Parallax One</h1>
</div>
<div class="single-parallax static-bg">
<h1>No Parallax</h1>
</div>
<div class="single-parallax parallax parallax-bg-2">
<h1>Parallax One</h1>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
CSS CODE :
* {
margin: 0;
padding: 0;
}
.parallax-wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.single-parallax {
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.single-parallax h1 {
font-size: 20px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
padding: 5px 10px;
}
.parallax::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.parallax-bg-1::after {
background-image: url(../imgs/1.png);
}
.parallax-bg-2::after {
background-image: url(../imgs/2.png);
}
.static-bg {
background: greenyellow;
}
You were almost there! You shouldn't add the background-image to ::after, you can just add it to the element itself. And you forget a few lines of code for the background-image:
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
Here it is all together:
* {
margin: 0;
padding: 0;
}
.parallax-wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.single-parallax {
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.single-parallax h1 {
font-size: 20px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
padding: 5px 10px;
}
.parallax-bg-1 {
background-image: url(../imgs/1.png);
}
.parallax-bg-2 {
background-image: url(../imgs/2.png);
}
.static-bg {
background: greenyellow;
}
<div class="parallax-wrapper">
<div class="single-parallax parallax parallax-bg-1">
<h1>Parallax One</h1>
</div>
<div class="single-parallax static-bg">
<h1>No Parallax</h1>
</div>
<div class="single-parallax parallax parallax-bg-2">
<h1>Parallax One</h1>
</div>
</div>
If you want to have the little scroll effect on the background-image, you can use ::after just like you did:
* {
margin: 0;
padding: 0;
}
.parallax-wrapper{
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.single-parallax{
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.single-parallax h1{
font-size: 20px;
background: rgba(0,0,0,.3);
color: #fff;
padding: 5px 10px;
}
.parallax::after{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
content: '';
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.parallax-bg-1::after{
background-image: url(../imgs/1.png);
}
.parallax-bg-2::after{
background-image: url(../imgs/2.png);
}
.static-bg{
background: greenyellow;
}
<div class="parallax-wrapper">
<div class="single-parallax parallax parallax-bg-1">
<h1>Parallax One</h1>
</div>
<div class="single-parallax static-bg">
<h1>No Parallax</h1>
</div>
<div class="single-parallax parallax parallax-bg-2">
<h1>Parallax One</h1>
</div>
</div>
My HTML:
<!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>Welcome to SPACE </title>
<link rel="icon" href="planeticon.png">
<link rel="stylesheet" href="indexspace.css">
</head>
<body>
<div class="container">
<div class="sun"></div>
<div class="earth"></div>
</div>
</body>
</html>
So this is my CSS:
body {
margin: 0;
padding: 0;
background: url(starbackground.jpg);
}
.container {
width: 120px;
height: 120px;
margin: 200px auto;
position: relative;
padding:40px;
}
.sun {
width: 120px;
height: 120px;
background: URL(sun2.png) no-repeat;
background-size: cover;
border-radius: 50%;
}
.earth {
width: 40px;
height: 35px;
background: url(earth4.png) no-repeat;
background-size: cover;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
box-shadow: 20px 20px 10px 2px #000000cc;
animation-duration: 4s;
animation-name: slide;
}
#keyframes slide {
50%{
left: calc(100%-40px);
top: calc(100%-40px);
}
100% {
z-index: -1;
}
}
And this is what it shows in Inspect: [key frame problem][1] [1]: https://i.stack.imgur.com/NmT6I.png
I've read that strikethrough lines means that some other element is overriding its importance, however I'm struggling to figure this one out.
Thanks in advance
So I'm having a hard time making an image with a psuedo element
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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="main">
<h1>TESTING</h1>
</section>
</body>
</html>
And Here's the CSS:
body {
margin: 0;
}
.main::before {
content: '';
background-image: url('./Path\ 14#2x.png');
position: absolute;
display: inline-block;
background-size: 30% 100%;
height: 30px;
width: 100%;
}
.main {
background-color: green;
color: white;
font-family: Helvetica;
display: grid;
justify-content: center;
align-items: center;
margin-top: 100px;
height: 100px;
}
Here's how the code looks when you see it:
I want the image to take 100% of the width instead of repeating like that maybe the image is too small but I can't find a bigger image
Here's the image
THANK YOU IN ADVANCE
Try this, I added background-repeat: no-repeat; and then change the background size to background-size: 100% 100%;
See working example here:
body {
margin: 0;
}
.main::before {
content: '';
background-image: url('https://i.imgur.com/TEKMxzx.png');
background-repeat: no-repeat;
position: absolute;
display: inline-block;
background-size: 100% 100%;
height: 30px;
width: 100%;
}
.main {
background-color: green;
color: white;
font-family: Helvetica;
display: grid;
justify-content: center;
align-items: center;
margin-top: 100px;
height: 100px;
}
<!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="style.css">
</head>
<body>
<section class="main">
<h1>TESTING</h1>
</section>
</body>
</html>
I am facing a problem with resizing background image in flexbox.
What want to do is that background image is shrinking horizontally, rather than vertically whilst resizing a browser's window.
I tried different background-size properties and tried with max and min height/width as well as flex-shrink and nothing works for me.
Thanks in advance!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.image-header {
display: flex;
min-height: 75vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
url('https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/190403-pancakes-066-copy-1554497284.jpeg?crop=0.777xw:0.584xh;0.115xw,0.315xh&resize=1200:*');
background-repeat: no-repeat;
background-attachment: fixed;
max-width: 100%;
background-size: contain;
position: relative;
}
.image-header h1 {
color: white;
padding: 25px;
text-shadow: 2px 2px 2px black;
position: absolute;
bottom: 0;
left: 0;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="main-image">
<div class="image-header">
<h1>Easy Fluffy American Pancakes</h1>
</div>
</body>
</html>
This should work for you below.
https://jsfiddle.net/pa5dbk8j/#&togetherjs=mk3zhMtk7M
.image-header
I added height to the image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.image-header {
display: flex;
min-height: 75vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
url('https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/190403-pancakes-066-copy-1554497284.jpeg?crop=0.777xw:0.584xh;0.115xw,0.315xh&resize=1200:*');
background-repeat: no-repeat;
background-attachment: fixed;
max-width: 100%;
max-height:100%;
background-size: contain;
position: relative;
}
.image-header h1 {
color: white;
padding: 25px;
text-shadow: 2px 2px 2px black;
position: absolute;
bottom: 0;
left: 0;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="main-image">
<div class="image-header">
<h1>Easy Fluffy American Pancakes</h1>
</div>
</div>
</body>
</html>