I have two two containers, a navigation bar and the hero below it. I only set background-image for the hero and I have no background-image set for the navigation bar. However, the background for the navigation bar seems to be set automatically the same as the hero.
Part of my css looks like below:
.Nav {
height: 55px;
display: flex;
justify-content: space-between;
padding: 1rem 2rem;
z-index: 100;
position: fixed;
width: 100%;
opacity: 0.8;
}
.HeroWrapper{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
background-image: url("images/pencil.jpg");
background-size: 100px;
}
and my html is like:
<div class = "Nav"></div>
<div class = "HeroWrapper"></div>
This is happening because of the position values of both of your divs (fixed and relative).
It looks like .Nav has a transparent background by default. If you do not want .Nav to have this background you could simply specify another such as background: white;
.Nav {
height: 55px;
display: flex;
justify-content: space-between;
padding: 1rem 2rem;
z-index: 100;
position: fixed;
width: 100%;
opacity: 0.8;
background: white
}
Related
I want to put watermark-text at the center of page. but it's not work it always go to the left of page. I try to use top and left with the #background element but the font-size of #watermark-text get smaller how can I put #watermark-text in the center without change the font-size.
#background {
position: absolute;
background: white;
z-index: 0;
}
#content {
z-index: 1;
}
#watermark-text {
position: absolute;
color: #eae9e9;
font-weight: bold;
font-size: 800px;
}
<div id="background">
<p id="watermark-text">WaterMark</p>
</div>
<div id="content" </div>
I've used display: flex; align-items: center; justify-content: center; on the parent to center the child horizontally and vertically and in order to achieve that we need to set a height and a width to the parent.
#background {
height: 100vh;
width: 100%;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
#content {
z-index: 1;
}
#watermark-text {
color: #eae9e9;
font-weight: bold;
font-size: 800px;
}
<div id="background">
<p id="watermark-text">WaterMark</p>
</div>
<div id="content"> </div>
If by watermark you mean text that overlays the screen with text then you can do it very simply by setting the body to position: relative. This means that when we set the background div with position: absolute and inset:0, the watermark is positioned relative to the body element. This makes the background div cover the whole page.
Use grid and place-items center to put the text in the center of the screen. I've coloured the background and set opacity on the text so you can see that it's overlaid the content.
Note: I've set the font size a percentage of the viewport width using the vw unit so as you make the screen bigger, the watermark increases in size to suit. You can set this to a pixel value or, even better, rem or em.
If you want the watermark not to move with the screen scroll, change position: absolute to position: fixed.
Any questions, just pop a comment in and I'll respond.
body {
position: relative;
margin: 0;
}
#background {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #eae9e9;
background-color: rgba(0, 192, 0, 0.5);
opacity: 0.5;
font-weight: bold;
font-size: 15vw;
}
<div id="background">WaterMark</div>
<div id="content">
<img src='https://picsum.photos/id/237/400/900'>
</div>
#background {
position: fixed;
background: white;
width: 100vw;
height: 100vh;
top: 0px;
left: 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
z-index: -10;
}
#content {
z-index: 10;
width: 100vw;
height: 100vh;
color: black;
}
#watermark-text {
color: #eae9e9;
font-weight: bold;
font-size: 800px;
}
<div id="background">
<p id="watermark-text">WaterMark</p>
</div>
<div id="content">jlsgdfjlgdsfjodfgjoifdgjasfddddddddddds<br>joiasjoidsajoasfds </div>
This is how I would do it looks strange in the editor but should work perfectly on the page, alternative you can just set a background to the div itself where to content is, be aware that this won't be secure as anyone can just change the HTML and CSS clientside anyway.
.watermark {
/* Used to position the watermark */
position: relative;
}
.watermark__inner {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Absolute position */
left: 0px;
position: absolute;
top: 0px;
/* Take full size */
height: 100%;
width: 100%;
}
.watermark__body {
/* Text color */
color: rgba(0, 0, 0, 0.2);
/* Text styles */
font-size: 3rem;
font-weight: bold;
text-transform: uppercase;
/* Rotate the text */
transform: rotate(-45deg);
/* Disable the selection */
user-select: none;
}
I have used the z index -1 because the links were not appearing on the image background. now my input box is disabled along submit button.
contact {
position: relative;
min-height: 100vh;
padding: 50px 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background:rgba(0,0,0,0.7)url(3571952.jpg);
background-size: cover;
background-blend-mode: darken;
z-index: -1;
}
When you use a negative z-index, the div is placed under body and when you check in console the body tag will be highlighted instead of input. Try to remove z-index from contact class and add position absolute to the links and add z-index with higher value.
contact {
position: relative;
min-height: 100vh;
padding: 50px 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background:rgba(0,0,0,0.7)url(3571952.jpg);
background-size: cover;
background-blend-mode: darken;
z-index: 0;
}
links {
position: absolute;
z-index: 1;
}
I'm trying to align a div in the center of the screen.
The code works great until I make the screen small, then the scrolling doesn't work properly and it cuts off the top of my centered component (when the centered component height becomes equal or less than screen size)
Any idea About a solution ?!
I'd be happy to use any other approach (without transform) but with none of the approaches I've accomplished to put the div in the center of screen)
.LoginContainer {
background-color: $base;
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: scroll;
}
.LoginBox {
margin: 1rem;
padding: 5rem;
max-width: 30rem;
width: 60%;
position: relative;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: white;
}
<div class="LoginContainer">
<div class="LoginBox">
TEST
</div>
</div>
codesandbox.io/embed/suspicious-bird-hzood
I've also recreated the issue here. As you can see when the screen size has less height the white component gets clipped.
Image of the screen when the top part is clipped
Image of the regular screen
Would simply centering child components not work:
.LoginContainer {
background-color: $base;
...
display: flex;
justify-content: center;
align-items: center;
}
If you want the parent to be scrollable and the LoginComponent to be scrolled:
.LoginContainer {
background-color: $base;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.LoginBox {
padding: 15rem 5rem;
position: relative;
background-color: yellow;
}
<div class="LoginContainer">
<div class="LoginBox">
TEST
</div>
</div>
If you want the LoginComponent to not exceed the boundaries of the parent and make is scrollable:
.LoginContainer {
background-color: $base;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.LoginBox {
padding: 15rem 5rem;
position: relative;
background-color: yellow;
max-height: 100%;
overflow: auto;
}
<div class="LoginContainer">
<div class="LoginBox">
TEST
</div>
</div>
I'm attempting to insert a logo image using css on a element with background-image.
However, I couldn't get the a:before box to respect a's padding.
The first example in the snippet below is using width, height and display: block but nothing get shown at all.
So, I tried with position: absolute in second example. The logo is shown but it's not respecting a's padding.
How do I make it so the logo fit inside the padding of a?
Current
Expected
What I want to avoid doing
Due to responsive design requirement, I'd like the logo's size to change based on the a's element size. Therefore, below are some things I'd like to avoid.
Using fixed values to fit .logo:before inside a's padding.
Amending a styles
*, ::before, ::after {
box-sizing: border-box;
}
body { margin: 0; }
.container, .container > p, .container > .logo {
display: flex;
}
.container {
align-items: center;
justify-content: space-between;
margin-left: 2rem;
margin-right: 2rem;
}
.container > p, .container > .logo {
flex-basis: auto;
flex-grow: 1;
align-items: center;
}
.logo {
position: relative;
padding-top: .3125rem;
padding-bottom: .3125rem;
color: transparent !important;
}
.logo:before {
content: '';
background: url('https://via.placeholder.com/150x100/FF0000/000000') no-repeat;
background-size: contain;
width: 100%;
height: 100%;
display: block;
}
.logo.absolute:before {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<div class="container">
<a class="logo">Logo</a>
<p>Navigation links</p>
</div>
<div class="container">
<a class="logo absolute">Logo</a>
<p>Navigation links</p>
</div>
Try to change the value of top and bottom property of your logo to .3125rem;
.logo.absolute:before {
position: absolute;
left: 0;
right: 0;
top: .3125rem;
bottom: .3125rem;
}
I removed the padding for logo and added min-height: 28px; to your background image. Looking forward to further question.
*, ::before, ::after {
box-sizing: border-box;
}
body { margin: 0; }
.container, .container > p, .container > .logo {
display: flex;
}
.container {
align-items: center;
justify-content: space-between;
margin-left: 2rem;
margin-right: 2rem;
}
.container > p, .container > .logo {
flex-basis: auto;
flex-grow: 1;
align-items: center;
}
.logo {
position: relative;
/*padding-top: .3125rem;
padding-bottom: .3125rem;*/
color: transparent !important;
}
.logo:before {
content: '';
background: url('https://via.placeholder.com/150x100/FF0000/000000') no-repeat;
background-size: contain;
width: 100%;
height: 100%;
display: block;
min-height: 28px;
}
<div class="container">
<a class="logo">Logo</a>
<p>Navigation links</p>
</div>
<div class="container">
<a class="logo absolute">Logo</a>
<p>Navigation links</p>
</div>
Since .logo:before's content is an empty string, nothing will ever be displayed unless height is explicitly defined with a fixed value.
content: ' ' can fix the problem but this is just a patch rather than a root fix.
The root cause is due to align-items: center in .container which will align the content in the middle vertically with its minimum height required. A combination with empty content caused .logo:before element to not show anything at all.
The current desired behavior is wanting .logo's height to match the navigation links' height, there's no need to use align-items: center here and normal should do fine.
The position: absolute method will always ignore padding.
*, ::before, ::after {
box-sizing: border-box;
}
body { margin: 0; }
.container, .container > p, .container > .logo {
display: flex;
}
.container {
align-items: normal;
justify-content: space-between;
margin-left: 2rem;
margin-right: 2rem;
background-color: gray;
}
.container > p, .container > .logo {
flex-basis: auto;
flex-grow: 1;
align-items: center;
}
.logo {
position: relative;
padding-top: .3125rem;
padding-bottom: .3125rem;
color: transparent !important;
}
.logo:before {
content: '';
background: url('https://via.placeholder.com/150x100/FF0000/000000') no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
<div class="container">
<a class="logo">Logo</a>
<p>Navigation links</p>
</div>
I have a header in which are nested 2 divs (navigation) and one img (logo) element. I declared -webkit-filter: grayscale(1) in the header and it works well as expected applying grayscale to everything contained in the header. Only problem is I don't want grayscale applied to the logo.
Have tried many options (none of which work):
took logo out of the header (creates blank space)
created a divaround the header & placed img within in but outside
header(createsblank space)
used a variety of selectors to isolate img such as :not (no
effect)
The html is:
<body>
<header>
<nav class="navbar-fixed-bottom">
<ul class="navbar-nav">
<li>
news
</li>
<li>
recipe
</li>
<li>
event
</li>
<li>
food
</li>
</ul>
</nav>
<img class="logo" src="images/main_logo_03.png" alt="main">
</header>
The css is (note: am using flexbox):
html , body{
margin: 0;
padding: 0;
position: relative;
overflow-x: hidden;
}
header {
height: 100vh;
width: 100%;
padding: 0;
margin: 0;
overflow-x: hidden;
font-size: 100%;
position: relative;
margin-bottom: 1%;
background-image: url(../chateau-default3.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
-webkit-filter: grayscale(1);
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
align-items: center;
}
.navbar-fixed-bottom {
width: 100%;
height: 10%;
position: absolute;
bottom: 0px;
margin: auto;
padding: 0;
}
.navbar-nav > ul{
margin-left: auto;
margin-right: auto;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo{
height: auto;
width: auto;
max-height: 41%;
max-width: 41%;
position: relative;
top: -7%;
}
How do i get .logo to be untouched by the grayscale - while keeping it in its position in the center of the header? (am only looking for application on chrome) Would appreciate insights.
Found a workaround - took .logo outside the header and positioned it absolutely.