I have a css styling problem:
I created a header with text inside. The header has two pseudo elements: ::before and ::after.
Both elements lay on top of the header element. How do I get the h1 to stay in front of everything??
Here is my code example: (got code snippets removed?? i didnt found the button where to add)
header {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 99;
background-image: url("Bild1.svg");
background-size: 100% 100%;
text-align: center;
padding: 1px 20px;
}
header::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("Bild2.svg");
background-size: 100% 100%;
opacity: .5;
}
header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -10px;
background-image: url("Bild3.svg");
background-size: 100% 100%;
opacity: .5;
}
<header>
<h1>Title Text</h1>
</header>
Here is a image how it looks:
As you can see the Text is behind both elements.
I tried to fix it using z-index but nothing worked for me. U have and ideas?
apply z-index 99 on background
and apply z-index 999 on the text I hope it will work
I would suggest making the z-index of the h1 tag
h1{
z-index: 999;
color: white;
}
and making the background z-index to 99 or something below that.
Related
When setting a background gradient to background-attachment: fixed it is suddenly cropped to 50% of the page width. It seems related to the position left: 50%. I wonder if this is a bug or if I'm using the CSS wrong here:
.container {
position: relative;
height: 80px;
margin: 10px 0
}
.container:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
background: #f0f0f0;
background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);
left: 50%;
transform: translate(-50%);
}
.container.fixed-bg:before {
background-attachment: fixed; /* <-- This line causes the problem. Why? */
}
<div class="container">...</div>
<div class="container fixed-bg">...</div>
I know that I can bypass the issue by removing the styles left: 50%; and transform: ... but that's not a practical solution in my case. The container has an unknown left margin and the pattern needs to reach from edge to edge.
Does that mean my CSS is wrong? What CSS would display the fixed background pattern in full width?
Update
I notice that there is a different behavior across browsers:
The bug seems to be related to transform. Use margin instead
.container {
position: relative;
height: 80px;
margin: 10px 0
}
.container:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100vw;
background: #f0f0f0;
background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);
left: 50%;
margin-left:-50vw;
}
.container.fixed-bg:before{
background-attachment: fixed;
}
<div class="container">...</div>
<div class="container fixed-bg">...</div>
body {
height: 150vh;
}
#hero {
position: relative;
border: none;
height: 100vh;
}
#hero .hero-image {
background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 95%;
}
#hero .hero-image:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,0.2);
}
#hero .skewhero-mask {
height: 100%;
position: absolute;
top: 0;
left: 10vw;
width: 45vw;
overflow: hidden;
transform: skew(24deg) translateX(0vh) translateY(0%);
}
#hero .skewhero-parallax {
transform: translateX(0vh);
width: 200%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#hero .skewhero-image {
background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
height: 100%;
background-size: 110% auto;
background-attachment: fixed;
transform-origin: right top;
transform: skew(-24deg);
}
<section id="hero">
<div class="hero-image">
</div>
<div class="skewhero-mask">
<div class="skewhero-parallax">
<div class="skewhero-image"></div>
</div>
</div>
</section>
I am really stuck with this one. I'm designing a parallax effect where I shift the background-position property of a fixed background using jQuery. The jQuery isn't at fault here, so I won't include it here to reduce the complexity of the question.
In Chrome, I get the desired effect. In Firefox or Edge, it's a nightmare. I have not tested it on Opera as of yet. When removing the background-attachment: fixed from the class .skewhero-image in those browsers, I notice there's no difference whatsoever. The property doesn't do anything, because when I remove the same property in Chrome, I get the same undesirable result as in the other browsers.
How can I change my code as to achieve the exact same effect as I have now in Chrome, but in all other desktop browsers as well? Mobile browsers excluded.
Basically, the image of the cat must not move, only the container surrounding it. In Chrome, this works as intended. In Firefox or Edge, the cat moves with the container, it isn't fixed to the viewport.
Edit: I have found out that leaving out all transform properties, from itself and all parents, fixes the image to the viewport. Anything to remedy this?
I am not sure what version of Firefox you are using but I just created codepen and it is working fine
<https://codepen.io/anon/pen/ZgpgZP>
If you are still have problem, please describe in details
$(function() {
"use strict";
var $skp = $('.skewhero-parallax');
var $skm = $('.skewhero-mask');
var $hi = $('.hero-image');
function calcParallax() {
var $scroll = $(document).scrollTop();
$skm.css({'transform':'skew(24deg) translateX(-' + (0.445 * $scroll) + 'px)'});
$skp.css({'transform':'translateY(' + $scroll + 'px)'});
$hi.css({'transform':'translateY(' + $scroll + 'px)'});
}
$(window).on('scroll', function () {
calcParallax();
});
$(window).resize(function() {
calcParallax();
});
});
body {
height: 150vh;
}
#hero {
position: relative;
border: none;
height: 100vh;
}
#hero .hero-container {
height: 95%;
overflow: hidden;
}
#hero .hero-container:after {
content: "";
position: absolute;
background: rgba(0,0,0,0.2);
height: 95%;
top: 0;
left: 0;
right: 0;
}
#hero .hero-image {
height: 100%;
background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
background-repeat: no-repeat;
background-size: cover;
will-change: transform;
}
#hero .skewhero-mask {
height: 100%;
position: absolute;
top: 0;
left: 10vh;
width: 45vw;
overflow: hidden;
transform: skew(24deg) translateX(0vh);
will-change: transform;
}
#hero .skewhero-parallax {
width: 200%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transform: translateY(0px);
will-change: transform;
}
#hero .skewhero-image {
background-image: url(https://images.unsplash.com/photo-1518791841217-8f162f1e1131);
background-repeat: no-repeat;
height: 100%;
background-size: 110% auto;
background-position: 0px -35px;
transform-origin: right top;
transform: skew(-24deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero">
<div class="hero-container">
<div class="hero-image"></div>
</div>
<div class="skewhero-mask">
<div class="skewhero-parallax">
<div class="skewhero-image"></div>
</div>
</div>
</section>
I have found an alternative solution to fix my problem. Also, it seems browsers are able to deal with this solution a lot better. background-attachment:fixed is causing serious performance issues. This is because the browsers have to repaint the entire image when scrolled. Source #1 and Source #2. I have tested this myself and can confirm there's heavy lag when scrolling. I have started using the transform: translate() property, which is a lot more optimized for this as browsers don't have to repaint the entire image.
As I want to animate my parallax effect with jQuery, I've mimicked the fixed background effect in my code. I have added a code snippet of the desired effect, which works in Chrome, Firefox and Edge.
I'm trying to 'fake' multiple backgrounds in IE8 using the :before pseudo class on the body element.
body {
background: url('../image/header.gif') no-repeat center 50px;
}
body:before {
content: '';
background: url('../image/footer.gif') no-repeat center 100%;
width: 100%;
height: 100%;
top: 0px;
display: block;
z-index: 1;
position: relative;
}
I can't seem to get it to work though? IE just doesn't seem to recognise it at all neither in terms of displaying the 2nd background or showing the attributes in the developer tools.
Here is a link to the page too if that helps:
- http://www.concept.mattpealing.co.uk/grtsdfstvl-31-07-2014/dev/
As mentioned in the comments, you need to give the parent of a relatively positioned element an explicit height, which is why height:100% on the :before will not work.
positon:absolute on the body will do the trick.
body:before {
content: '';
background-image: url('../image/footer.gif');
background-repear: no-repeat;
background-position: center 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
z-index: 1;
}
I have a div with a background image that should be covered with a mask effect. On that div should be some content. I'm trying to get the content to be over the mask but for some reason it isn't working.
I added a jsFiddle:
http://jsfiddle.net/FHt9d/
Here is the code:
Html:
<div id="container">
<div id="mask"></div>
<div id="content"><h1>This is a header</h1></div>
</div>
Css
#container
{
width: 100%;
height: 246px;
position: relative;
background-repeat: no-repeat;
background-size: 100%;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/d/d8/Skyline_oklahoma_city.JPG')
}
#mask
{
z-index: 1;
height: 100%;
width: 100%;
background-color: rgba(75,139,228,.8);
position: absolute;
top: 0;
left: 0;
}
#content h1
{
z-index:2;
font-size: 32;
color: #fff;
}
The text should not be covered by the mask. Any help would be greatly appreciated,
Thanks!
try this (you missed a position: relative;):
#content h1 {
color: #FFFFFF;
position: relative; //missed
z-index: 2;
}
The elements that have
position: absolute
are always on top. Same thing applies to
position: fixed;
They always float above the elements in a browser.
To minimize this, you use
z-index: value;
For the elements with position value set, you can use:
z-index: 1;
and change it for the element you want to be above others
z-index: 2; /* or more than 2 */
This will do the job.
You missed a position: relative; on the #content h1. Indeed, z-index applies only on positionned elements.
I have a small .png file that repeats to form a background image. I need to set the body height of my page to 100% in order to use min-height property on my content wrapper. However, trying to use the background-image in conjunction with height:100% results in the image getting cut off when the page is scrolled. See picture to elaborate what I mean:
Background on top
But when scrolling it is cut off
How do I get the background image to repeat over the whole page, even after the user scrolls down? Here is the css:
body {
background-color:#9AAEBF;
overflow-y:scroll;
height:100%;
}
html:after {
background-image: url('http://www.example.com/img/background.png');
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Thanks for your ideas.
EDIT:
This is the image i need repeated:
Here is a fiddle:
http://jsfiddle.net/Nick_B/x2h3g/
try this
html:after {
background-image: url('http://www.example.com/img/background.png');
background-repeat:repeat;
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Now used to background-size
As like this
body {
background-color:#9AAEBF;
overflow-y:scroll;
height:100%;
}
html:after {
background-image: url('http://i.stack.imgur.com/iuzZU.png');
background-size:100%;
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Demo Full page
Live Demo
you can achieve your desired result through give the backgroun-size:100% in your html:after
CSS
html:after {
background-image: url('http://i.stack.imgur.com/iuzZU.png');
background-size:100%;
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}