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;
}
Related
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.
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>
I use this loader spinner using css and jquery. I would like to blur the background exept the image from URL. Any idea ?
Css:
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
background: url("http://enjoycss.com/bg-img/custom/107898-1py1ieu.1zm9.gif")
center no-repeat #33333308;
}
Js
<script>
$(window).load(function() {
$(".se-pre-con").fadeOut("slow");;
});
</script>
Thank you
When the gif is showing you can add a :before pseudo-element to the body. The blurry effect can be tricky to achieve, I'd recommend using a blurry PNG or a svg as background, in the snippet below I'm just using color:
body:before{
content:'';
background-color: #dbdbdb;
opacity: 0.7;
background-size: cover;
width: 100%;
padding-bottom: 100%;
position: fixed;
z-index: 1;
}
You can replace the body selector with a class and then with some jQuery remove or add the class to the body.
See this fiddle for reference: https://jsfiddle.net/3r1zc9gw/3/
Not sure if there's an trick to do this but I am looking for a way to basically use CSS to repeat a background image(repeat-y) to a certain point at the bottom of the element like 80 px.
I really hope there an way to do this.
.rep-img {
background-position: center left;
background-repeat: repeat-y;
background-image: url('../images/image.png');
background-repeat-y-stop: 80px; /* made up property */
}
Put the background on a pseudo element:
.rep-img {
position: relative;
}
.rep-img:before {
content: '';
background: url('../images/image.png');
position: absolute;
top: 0; right: 0; left: 0;
bottom: 80px;
z-index: -1; /* to push it behind any content in .rep-img */
}
Here's the fiddle: http://jsfiddle.net/T7JBx/
My nivoslider slideshow on my index page shows us correctly in chrome, IE 10 and opera.
Only in Firefox it shows us up on the right side.
Here is my site: http://www.colombian-emerald-jewelry.com/
How can I fix this ?
I appreciate your help
You can also just add float:left; to the nivoSlider class:
.nivoSlider {
float: left;
height: auto;
overflow: hidden;
position: relative;
width: 100%;
}
Positioning is the way I got it working, in both browsers try this:
Add:
.slider-wrapper {
height: 350px;
position: relative;
}
Edit:
.theme-default .nivoSlider {
background: url("loading.gif") no-repeat scroll 50% 50% #FFFFFF;
box-shadow: 0 1px 5px 0 #D3D3D3;
position: absolute;
}
.theme-default .nivo-controlNav {
bottom: 0;
clear: both;
left: 45%;
overflow: hidden;
padding: 0;
position: absolute;
}
In case anyone meets the same problem, but wants to avoid using float (it forces using clearfix if your slider is let's say above the main content of page), the clear: both works even better.
.nivoSlider {
height: auto;
overflow: hidden;
position: relative;
width: 100%;
clear: both
}