I need to place a background image (#foreground) on top of website global background(#wrapper). The problem is that wrapper's background is being displayed on top of foreground's, although wrapper has lower z-index and foreground.
HTML:
<body>
<div id="wrapper">
//website content here
</div>
<div id="foreground"></div>
</body>
CSS
#wrapper {
width:100%;
background:url(../img/header/main_bg01.jpg) repeat-x top center, url(../img/header/patternextra.jpg) repeat top center;
min-height:1650px;
overflow:hidden;
z-index: -2;
}
#foreground {
background: url(../img/foreground.png) repeat 90% 110%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: -1;
}
Regards,
z-index doesn't work without position being specified.
Try:
#wrapper {
width:100%;
background:url(../img/header/main_bg01.jpg) repeat-x top center, url(../img/header/patternextra.jpg) repeat top center;
min-height:1650px;
overflow:hidden;
z-index: -2;
position: relative;
}
Change z-indexes to positive values:
#wrapper {
z-index: 1;
}
#foreground {
z-index: 2;
}
Works for me: http://jsfiddle.net/jaakkokarhu/4y37zkpu/
Related
I've got a div with a background color and a transparent background image.
HTML
<div class="watermark">
<div class="col-md-12">Something else</div>
<div class="col-md-12">Something more..</div>
<div class="col-md-12">Something at the end</div>
</div>
CSS
body{
background-color:white;
}
.watermark {
display: block;
position: relative;
}
.watermark::after {
content: "";
background:#C52F11 url(https://www.google.co.in/images/srpr/logo11w.png)no-repeat;
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
jsfiddle
I want to be change the opacity of the image, but leave the background color unaffected. But when I set the opacity, both change.
Is there a way to do this?
Use an rgba color value and remove the opacity. For a white overlay you may use background:rgba(255,255,255, 0.5); while the last value (in this case 0.5) defines your transparency.
You can check this fiddle.
You can add a ::before pseudo-element to handle the background color, so that the ::after element has the image and opacity change, and the background-color can be unaffected. Note that the background-color of the actual .watermark element needs to be transparent, as the z-index:-1 will push the pseudo-elements behind the actual one.
.watermark {
width: 300px;
height: 100px;
display: block;
position: relative;
}
.watermark::before, .watermark::after {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.watermark::before {
background:#C52F11;
}
.watermark::after {
background: url(https://www.google.com/images/srpr/logo11w.png) no-repeat;
opacity: 0.2;
}
<div class="watermark">
<div class="col-md-12">Something else</div>
<div class="col-md-12">Something more..</div>
<div class="col-md-12">Something at the end</div>
</div>
Updated fiddle
CSS for body , whatever you want
body{
background-color:white;
}
main div(.watermark) with background color, width and height of your choice
.watermark {
width: 538px;
height: 190px;
display: block;
position: relative;
background: #C52F11;
}
watermark after CSS , image with opacity
.watermark::after {
content: "";
background: url('https://www.google.co.in/images/srpr/logo11w.png') no-repeat;
opacity: 0.4;
top: 0;
left: 0;
position: absolute;
z-index: 1;
width: 538px;
height: 190px;
}
I would recommend to use two divs. Its always a good idea to have two divs in overlapping stuffs with relative and absolute. Moreover, it adds long life to your code structure before you have to change it otherwise.
It's a trick:
Insert the image into the webpage anywhere(regardless of the size).
Set the desired opacity by style="opacity:0.7;" (for opacity= 0.7).
Take a snapshot of that image.
Remove that image and insert the snapped image where ever you want.
I am trying to center an image of a phone vertically. The code I have to far works but if I decrease the window height the phone image will overlap the header. What I want to do is center the phone image vertically between the bottom of the header and the bottom of the window and stay there no matter how tall the window is (but not overlap the header).
Link to jsfiddle: jsfiddle.net/#&togetherjs=zAMDokl6RG.
Having lots of issues with this. Could someone give me some pointers on how to do this please? Thanks :
css:
* {
margin: 0;
padding: 0;
/* To keep our header correct */
}
#header {
background: #e9e6e6;
/* Here set your colour */
height: 55px;
width: 100%;
top: 0;
left: 0;
position: absolute;
/* box-shadow: 0px 2px 2px #888888;*/
}
.innerdiv {
position: absolute;
bottom: 0;
right: 0;
padding: 0px 0px;
z-index: -2;
}
.dllogodiv {
position: absolute;
top: 0;
right: 0;
padding: 5px 5px;
}
.centeredImage {
text-align: center;
display: block;
}
.centeredImage img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<div id="header">My header</div>
</div>
<div class="innerdiv">
<img class="imageCorner" src="http://s4.postimg.org/tyfx93u8p/logo.png">
</div>
<p class="centeredImage">
<img src="http://s4.postimg.org/p12cnzs9l/slide1.png">
</p>
heres a fiddle I put together
the idea is to have a top/middle/bottom. There is a css calc property you can use to calculate something, like height. Assuming you know what the height of your image is (lets say 200px), you can do:
top: calc(50% - 100px);
this will make the top of your image 50% from the top, minus half the size of the image, so that the middle of the image is 50% from the top.
of course, you have to set the middle section to position relative or absolute, and make the image position absolute inside.
This is just one quick way, there are other ways. Then again, usually you want to center something within a div, not the whole page.
I have 3 buttons that I need to stay fixed in the lower right corner of the page.
Example.
But when I set position:fixed , it goes straight up to the top (which is also fixed).
How can I make them stay down there, yet when I scroll up to follow me?
Thank you!
Add position: fixed; bottom: 0; ,and remove the top:0;,the bottom property sets the bottom edge of an element.
Try this code:
DEMO
#buton{text-align:right;
height: 100px;
width: 100%;
z-index: 100;
position: fixed;
bottom: 0;
}
Remove
top:0
and set
bottom:0; position: fixed; right: 0;
#buton {
text-align: right;
height: 100px;
width: 100%;
z-index: 100;
position: fixed;
bottom: 0;
right: 0;
}
See Fiddle Demo
Wrap everything in a container and give it position relative
make #buton absolute with bottom:0
keep myButton independent of any position
working demo
html,body{
height:100%; /* important */
}
#conatiner {
position: relative;/* added*/
height:100%;/* important */
}
#buton {
text-align:right;
width: 100%;
z-index: 100;
position: absolute;/* added*/
bottom: 0;
}
The problem is with top:0; Since you need the buttons to stay fixed in the lower right corner of the page you should use bottom: 0;position: fixed;
Update the below part
#buton{
text-align:right;
height: 100px;
top: 0;
width: 100%;
z-index: 100;
}
to the one given below,
#buton{
text-align:right;
height: 100px;
bottom:0;
position: fixed;
width: 100%;
z-index: 100;
}
It will work like a charm.
Have made some changes, see the demo..
UPDATE :
See demo
I am trying to create a gray transparent background screen, on top of my original html page.
What I have done so far is to append a div (with jquery) to the body tag with this css style:
.spesificPropertiesDiv {
position: absolute;
display: block;
top: 0px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 6000;
text-align: center;
}
as I mentioned before I am appending a div with this class to the body.
Every works fine when I append it on large screen (24 inch) but when I am appending it on 16 inch display the gray screen div's height is 100 px less than the body's height.
One more thing that I need to mention is that on large screen the page is fit on the screen where on the smaller screen a scroll-bar appears to make the page lower side of the page visible.
Why dose this happen? How can I fix it?
Thanks!
I have changed it to:
.spesificPropertiesDiv{
display: block;
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 6000;
text-align: center;
}
and it works!!!!
Thank you all for the help
Could you try:
.spesificPropertiesDiv {
position: fixed; *position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
Additionally, is there any padding on this div? Is it a direct child of the <body> tag?:
<body>
<div class="spesificPropertiesDiv"></div>
</body>
My code looks like this:
css:
.top {
position: absolute;
top:0;
left:0;
height: 1600px;
width: 100%;
z-index: -100;
}
.bar {
position: relative;
z-index: -200;
width: 100%
height: 100px;
}
.inner-bar {
position: relative;
z-index: 100;
width: 100%
height: 50px;
}
html:
<body>
<div class="top">some content</div>
<div class="bar">
<div class="inner-bar">some content</div>
<div>
</body>
As you can see I am trying to make inner-bar appear in front but this does not work. Once I set bar to be behind of everything ( which works) this also sets inner-bar to be behind of everything no mater what styling I do for inner-bar. My layout requires that inner-bar must be a child of bar. So is there a solution and what it is?
To make it clear my objective is to make bar behind top (content in top appears on bar) and to make top behind inner-bar ( content in top is hidden if it overlaps inner-bar so that the links in inner-bar are active).
first off there is an error in the html you posted:
<body>
<div class="top">some content</div>
<div class="bar">
<div class="inner-bar">some content</div>
</div>
</body>
you didn't close the last div :)
as for the rest:
here you go good sir! http://jsfiddle.net/8AJnD/31/
.top {
position: absolute;
top:0;
left:0;
height: 1600px;
width: 100%;
top:0;left:0;z-index:0;
}
.bar {
position: absolute;z-index:-1;
width: 100%;
height: 100px;top:0;left:0
}
.inner-bar {
position: absolute;
z-index:-2;
width: 100%
height: 50px;top:0;left:0
}
Use absolute instead of relative and make the parent relative to be able to position the elements however you want them to be positioned
Negative z-index values have strange behavior. I don't believe that they work in "layers" like you would expect, rather they all wind up on the same "layer". Try using positive z-index values instead:
.top {
position: absolute;
top:0;
left:0;
height: 1600px;
width: 100%;
z-index: 1;
}
.bar {
position: relative;
z-index: 2;
width: 100%
height: 100px;
}
.inner-bar {
position: relative;
z-index: 3;
width: 100%
height: 50px;
}