I have two images that need to be at the bottom of a div and behind a gradient that needs to have the same rules both can be fixed with position: absolute; bottom: 0; but it moves the images in front of the gradient
The reason for this approach is that I need the page to be responsive with different resolutions for PCs
How it is now
How I want it
Gradient CSS Code:
.gradient {
position: absolute;
bottom: 0;
background-image: linear-gradient(0deg, #000000, transparent);
width: 100%;
margin-top: 43.5%;
height: 13.8%;
}
Images CSS Code:
.images {
width: 95%;
margin: auto;
padding: 4% 0 0 0;
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
bottom: 0;
}
Html of the whole page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="icon.png">
<title>Creature Cult</title>
</head>
<body>
<div class="banner">
<div class="gradient"></div>
<div class="navbar">
<img src="banner.png" alt="logo" class="logo">
<ul>
<li>About</li>
<li>Team</li>
<li>Socials</li>
</ul>
</div>
<div class="explore">
<img src="explore.png" alt="explore" class="explore">
</div>
<div class="arrow">
<img src="arrow.png" alt="arrow" class="arrowBTN">
</div>
<div class="images">
<img src="rabbit.png" alt="rabbit" class="rabbit">
<img src="penguin.png" alt="penguin" class="penguin">
</div>
</div>
<div class="about">
</div>
</body>
</html>
Add a z-index on .gradient (z index 1) .images (z index 0) in order to fix display layers order
Related
I am using div tag with a width of 100% and height of 100%. Under the div, I put my first image with 50% width. When I put second image with same 50% width, the second image is going to the bottom of first image. If I change the width to 49%, second image is aligning to the right side of first image (which is expected). Any way the width of div is 100%, why the second image is going down if I put width as 50% ?
body {
margin: 0px;
}
div {
width: 100%;
height: 100%;
}
.first-image {
width: 50%;
height: 100%;
outline: 0px;
}
.second-image {
width: 50%;
height: 100%;
outline: 0px;
}
<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>project</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div>
<img class="first-image" src="https://media.istockphoto.com/id/173682323/photo/says.jpg?s=612x612&w=0&k=20&c=7jnXQrYzUWNTnLhjPgimxHIbjsaHvZmAMALGVzYNARQ=" alt="first-image" />
<img class="second-image" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" alt="second-image" />
</div>
</body>
</html>
You can use CSS Display Flex Property.
For Ref: https://www.w3schools.com/css/css3_flexbox.asp
body {
margin: 0px;
}
div {
width: 100%;
height: 100%;
}
.first-image {
width: 50%;
height: 100%;
outline: 0px;
}
.second-image {
width: 50%;
height: 100%;
outline: 0px;
}
.flex_box{
display: flex;
}
<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>project</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="flex_box">
<img class="first-image" src="firstscreen.jpg" alt="first-image" />
<img class="second-image" src="secondscreen.jpg" alt="second-image" />
</div>
</body>
</html>
This is because white space also creates space in HTML.
It is the space between words, but the browser also respects spaces between HTML elements. Since there is a line-break and space between your two images you have a space between them. Remove these and the 50% width images also fit into one line.
If you set white-space: nowrap on your div you see the space more clearly (and also some scrollbars, since now the two images are bigger than the container and create some overflow)
As other answer said, best way to get rid of this is to just use flexbox for this kind of layout.
body {
margin: 0px;
}
div {
width: 100%;
height: 100%;
}
.first-image {
width: 50%;
height: 100%;
outline: 0px;
}
.second-image {
width: 50%;
height: 100%;
outline: 0px;
}
<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>project</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div>
<img class="first-image" src="https://media.istockphoto.com/id/173682323/photo/says.jpg?s=612x612&w=0&k=20&c=7jnXQrYzUWNTnLhjPgimxHIbjsaHvZmAMALGVzYNARQ=" alt="first-image" />
<img class="second-image" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" alt="second-image" />
</div>
<div>
<img class="first-image" src="https://media.istockphoto.com/id/173682323/photo/says.jpg?s=612x612&w=0&k=20&c=7jnXQrYzUWNTnLhjPgimxHIbjsaHvZmAMALGVzYNARQ=" alt="first-image" /><img class="second-image" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" alt="second-image" />
</div>
</body>
</html>
I am a beginner trying to do a school project every time after watching tutorial I still couldn't able to figure out why my image is not working in css. Hereby attaching my code for both Html and Css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive website</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css#3.0.0/reset.min.css" />
<link rel="stylesheet" href="/Assets/style.css">
</head>
<body>
<header>
<nav class="navbar">
<div class="brand-title">Brand Name</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="hero">
</div>
</header>
<script src="/Assets/main.js" defer></script>
</body>
header {
height: 100%;
color: red;
background: url('../img/hero.jpg');
}
.hero {
position:left;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
}
Try adding a tab to your height attribute where your header selector is at.
You can use vh (viewport height) instead of percent to achieve this – learn more about viewport units here: Fun with Viewport Units
Viewport Height (vh) – A percentage of the full viewport height. 10vh will resolve to 10% of the current viewport height.
Try changing your header CSS:
header {
height: 75vh; /* 100vh would be the full height of the viewport */
color: red;
background: url('../img/hero.jpg');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive website</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/reset-css#3.0.0/reset.min.css"
/>
<link rel="stylesheet" href="/Assets/style.css" />
<style>
header {
color: red;
background: url(https://images.unsplash.com/photo-1544526226-d4568090ffb8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aGQlMjBpbWFnZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80);
background-position: center;
height: 100vh;
}
.navbar {
display: flex;
justify-content: space-between;
}
.navbar-links ul {
display: flex;
justify-content: space-between;
}
.navbar-links ul li {
margin-right: 2rem;
list-style: none;
margin-top:2rem;
}
.navbar-links ul li a {
text-decoration: none;
font-size: 20px;
color: #fff;
background-color:rgb(93, 84, 84);
padding:10px;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<div class="brand-title">Brand Name</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="hero"></div>
</header>
<script src="/Assets/main.js" defer></script>
</body>
</html>
Check your css if it is working properly for example set the background of your body to red and check your image if it is in jpg or jpeg format.
Hi I have simple question with example. How can I achieve automatic shrinking image inside my flexbox when height is not enought for the image?
I have to do full screen app as in my example where image should fill as most place as it possible with image original aspect ration. When the space is not enought (Height is going to be smaller) Image should start shrinking IN HIS HEIGHT.
<!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" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<style>
body,
html {
height: 100%;
}
.cust-container {
border: 4px solid red;
max-height: 800px;
height: 100%;
width: 100%;
}
.cust-container img {
max-height: 100%;
width: auto;
max-width: 100%;
}
.img-container {
border: 4px solid green;
}
.left {
background-color: yellow;
}
</style>
<title>Static Template</title>
</head>
<body>
<div class="cust-container">
<div class="d-flex h-100">
<div class="w-50 left"></div>
<div class="right d-flex flex-column">
<div class="img-container flex-grow-1">
<img
src="https://www.google.com/logos/doodles/2020/lebanon-independence-day-2020-6753651837108623-2xa.gif"
alt=""
/>
</div>
<button class="btn btn-success">
hello
</button>
</div>
</div>
</div>
</body>
</html>
My code:
https://codesandbox.io/s/keen-tdd-952kv?file=/index.html
Explicitly setting the overflow property of the flex child solves this issue.
In your example, setting the overflow property of the .img-container element is what's needed.
While setting that element's max-height to 100vh would work for this isolated example, it almost certainly wouldn't be a workable solution if there were any other content on the page.
<!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" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<style>
body,
html {
height: 100%;
}
.cust-container {
border: 4px solid red;
max-height: 800px;
height: 100%;
width: 100%;
}
.cust-container img {
max-height: 100%;
width: auto;
max-width: 100%;
}
.img-container {
border: 4px solid green;
overflow: hidden; /* <-- */
}
.left {
background-color: yellow;
}
</style>
<title>Static Template</title>
</head>
<body>
<div class="cust-container">
<div class="d-flex h-100">
<div class="w-50 left"></div>
<div class="right d-flex flex-column">
<div class="img-container flex-grow-1">
<img
src="https://www.google.com/logos/doodles/2020/lebanon-independence-day-2020-6753651837108623-2xa.gif"
alt=""
/>
</div>
<button class="btn btn-success">
hello
</button>
</div>
</div>
</div>
</body>
</html>
If you use view height (vh) instead of % it should work I think.
.cust-container img {
max-height: 100vh;
width: auto;
max-width: 100%;
}
I want my header to be a full screen background.
Code works on other sites that i previously made but now it doesn't work.
Please help.
The code is same on other websites. And it works.
Here is my html5 and css3:
body {
margin: 0px;
padding: 0px;
font-family: roboto;
}
header {
background: url('./pics/bg1.jpg') 50% 50% no-repeat;
width: 100%;
height: 100%;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome | SoundNet</title>
<meta name="theme-color" content="#6699ff">
<!--Meta-->
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, user-capable=yes">
<!--Js-->
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<!--Link-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<header>
<div class="menu">
<ul>
<li>Categories</li>
<li>Playlists</li>
<li>Login</li>
</ul>
</div>
<div class="logo">
<span class="border-n">N</span>ESTA
<div class="button">
Sign Up
</div>
</div>
</header>
<section>
<div class="party">
<h3>Get the party started</h3>
<p></p>
</div>
</section>
</body>
</html>
[Edit: Added snippet but no image, for the moment.]
Define a height for the body. 100% height and width takes its parent height and width.
Because your body dont have both a width and height, the 100% height and width of your header won't have any effect.
Snippet
html, body {
width: 100%;
height: 100%;
margin: 0;
}
header {
height: 100%;
width: 100%;
background: url('https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg');
background-repeat: no-repeat;
background-size: cover;
}
<header></header>
It's my first post and I'm trying to fix my CSS. I have a .jumbotron (Bootstrap) and my image is too big. Re-sizing it won't work as people have different sized screens. Here's the code.
.jumbotron {
background-image: url('SONUBANNER.png');
height: 500px;
width: auto;
margin-top: 5rem;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section class="jumbotron">
<div class="container">
</div>
</section>
</body>
</html>
I tried having the the min-width: CSS selector, but that had the same affect. I do not want to have my viewers scroll to see the rest of the .jumbotron. Can anyone show me the fix?
/* Latest compiled and minified CSS included as External Resource*/
dna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.jumbotron {
height: 500px;
display: flex;
align-items: center;
background: url("SONUBANNER.png") center center;
background-size: cover;
margin-top: 5rem;
}
<div class="jumbotron">
</div>
You won't be able to use all of the features in Bootstrap if you are adding image with your CSS class.Just use the bootstrap features which comes.Add your image in to img-responsive class.
.jumbotron {
height: 500px;
width: auto;
margin-top: 5rem;
}
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<section class="jumbotron">
<div class="container">
<img src="http://weknowyourdreamz.com/images/evening/evening-09.jpg" class="img-responsive" alt="Cinque Terre">
<!-- <img src="SONUBANNER.png" class="img-responsive" alt="Cinque Terre"> -->
</div>
</section>
</body>
</html>