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>
Related
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
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>
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>
Hi I am facing the shadow disappear issue when moving child div to below the sticky parent div.
Code:
<!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>
html, body{
min-height: 100% !important;
}
body{
margin: 0;
background-color: #470c77;
}
.header{
width: 100%;
height: 50px;
background-color: rgb(238, 238, 238);
box-shadow: 0px 0px 6px 2px #000000;
position: sticky;
top: 0;
}
.view{
width: 100%;
height:25%;
background-color: rgb(255, 255, 255);
position: fixed;
top: 50px;
z-index: 0;
}
</style>
</head>
<body>
<div class="header">
<!-- TODO:- Some elements here -->
<div class="nav">
<!-- TODO:- Some Elements Here -->
<div class="view">
</div>
</div>
</div>
</body>
</html>
The main problem is shadow disappears from nav. If I make top: 50px; to view then the shadow appears. But background color of the body also visible.
current layout:
Expected Layout:
Please help me to solve this problem with CSS only.
If you want to achieve the box-shadow to a sticky element, then you need to use :after pseudo class and give the shadow there like,
.header:after {
z-index: -1;
position: absolute;
content: "";
bottom: 7px;
left: auto;
width: 100%;
top: 0;
box-shadow: 0px 0px 6px 2px #000000;
}
And modify the header class css like below snippet,
html, body{
min-height: 100% !important;
}
body{
margin: 0;
background-color: #470c77;
}
.header{
width: 100%;
height: 50px;
background-color: rgb(238, 238, 238);
position: sticky;
top: 0;
}
.header:after {
z-index: -1;
position: absolute;
content: "";
bottom: 7px;
left: auto;
width: 100%;
top: 0;
box-shadow: 0px 0px 6px 2px #000000;
}
.view{
width: 100%;
height:25%;
background-color: rgb(255, 255, 255);
position: fixed;
top: 50px;
z-index: 0;
}
<div class="header">
<!-- TODO:- Some elements here -->
<div class="nav">
<!-- TODO:- Some Elements Here -->
<div class="view">
</div>
</div>
</div>
Try this:
<!DOCTYPE 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>
<style>
html, body{
min-height: 100% !important;
}
body{
margin: 0;
background-color: #470c77;
}
.header{
width: 100%;
height: 50px;
background-color: rgb(238, 238, 238);
-webkit-box-shadow: inset 0 -7px 3px -5px rgba(0,0,0,0.65);
-moz-box-shadow: inset 0 -7px 3px -5px rgba(0,0,0,0.65);
box-shadow: inset 0 -7px 3px -5px rgba(0,0,0,0.65);
position: sticky;
top: 0;
}
.view{
width: 100%;
height:25%;
background-color: rgb(255, 255, 255);
position: fixed;
top: 50px;
z-index: 0;
}
</style>
</head>
<body>
<div class="header">
<!-- TODO:- Some elements here -->
<div class="nav">
<!-- TODO:- Some Elements Here -->
<div class="view">
</div>
</div>
</div>
</body>
</html>
To hide the background, you can increase .view height
So basically, the shadow wasn't removed or disappeared, it's just that it's hidden under the .view div. So here's what you gonna do, just remove the box-shadow on header since it's hidden, add update the background of your .view div. See my code below:
html, body{
min-height: 100% !important;
}
body{
margin: 0;
background-color: #470c77;
}
.header{
width: 100%;
height: 50px;
background-color: rgb(238, 238, 238);
position: sticky;
top: 0;
}
.view{
width: 100%;
height:25%;
background: linear-gradient(to bottom, #999 0, #fff 7px, #fff 100%);
position: fixed;
top: 50px;
z-index: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header">
<!-- TODO:- Some elements here -->
<div class="nav">
<!-- TODO:- Some Elements Here -->
<div class="view">
</div>
</div>
</div>
</body>
</html>
bellow are my html and css files where my header div disappearing when added position fixed. i even specified top and left but no luck. please help.
body {
margin: 0px;
padding:0px;
background-color:whiteSmoke;
}
.header {
height: 60px;
background-color: pink;
box-shadow: 3px 3px 5px silver;
position: fixed;
top:0;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>the title</title>
</head>
<body>
<div class="header"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>the title</title>
<style>
body {
margin: 0px;
padding: 0px;
background-color: whiteSmoke;
}
.header {
height: 60px;
width: 100%;
background-color: pink;
box-shadow: 3px 3px 5px silver;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
In your original code, there is no content in the div with the class "header". Therefore, its width is 0.
I've added "width: 100%" to the class header so that it can gain width and appear.
You can run the code to see the result. I hope it helps.
As an alternative to declaring a specific width property to the fixed element, a right property with the value of 0 can also be declared, effectively "expanding" the fixed element width from left-to-right of the screen.
body {
margin: 0;
padding: 0;
background-color: whiteSmoke;
}
.header {
height: 60px;
background-color: pink;
box-shadow: 3px 3px 5px silver;
position: fixed;
top: 0;
left: 0;
right: 0;
}
<body>
<div class="header"></div>
</body>
Because a fixed element doesn't have a width.
So it has a height of 60px and becaus eyou didnt specify a width, so it appears hidden. Adding content, or something along the lines of width: 100%; will show the div again.
Please add some content or width to header.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>the title</title>
</head>
<body>
<div class="header"></div>
</body>
</html>
body {
margin: 0px;
padding:0px;
background-color:whiteSmoke;
}
.header {
width:60px;
background-color: red;
height: 60px;
background-color: pink;
box-shadow: 3px 3px 5px silver;
position: fixed;
top:0;
left:0;
}
Running Expample