I'm trying to get an image to go over my posts, so the text and images go behind the image. The z-index isn't working when i try to get it to stack over everything. I'm not an expert at coding and I'm honestly just using tumblr for this, but I can't seem to find an answer anywhere. or one that I can understand, given the fact that I'm still a beginner. Any help would be super appreciated, here's the code:
#char {
position:fixed;
opacity: 1.0;
width: 1366px;
height: 768px;
TOP:0px;
LEFT:0px;
z-index: 4;
}
I have added a code snippet, it contains just a div. The div overlaps the body. if you provide your source code, I can clarify though. you could also try increasing the z-index to 99 or 999. I think there is many z index'd div's in your code.
<html>
<head>
<title></title>
</head>
<style type="text/css">
#char {
position:fixed;
opacity: 1.0;
width: 1366px;
height: 768px;
TOP:0px;
LEFT:0px;
z-index: 4;
background-color: red;
}
body{
background-color: #ccc;
}
</style>
<body>
<div id="char">
</div>
</body>
</html>
You could also try adding the image as a background image to an element and then putting your text in another element inside of that one. With a few lines of alignment code you can get your text where you want it.
<style>
.divStyle {
background-image: url('http://38.media.tumblr.com/a10b40131efc719d0bff421226b9c52b/tumblr_inline_mq5b19gEvv1qz4rgp.jpg');
background-size: cover;
height: 90vh; // put this to a 100 to cover the full height of the containing element (less here to avoid scroll bar)
width: 100%;
display: flex;
align-items: center; //change center to 'flex-start' to move text to top or 'flex-end' to move it to the bottom
}
.myText {
width: 100%;
color: white;
font-size: 24px;
text-align: center; //can also be 'left' or 'right'
}
</style>
<div class="divStyle">
<div class="myText">Here is my text</div>
</div>
Related
You know how we make code like below to make an overlay for the background image or color.
HTML
<section id="hero">
<div class="hero container">
<div>
<h1>Hello, My Name is </h1>
Porfolio
</div>
</div>
</section>
CSS
.container {
background-image: url(./img/someimg.jpg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 1;
}
.container::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .7;
z-index: -1
}
I understand that I have to put z-index to make the anchor tags clickable on the container. But also confused that why the overlay is still showing over the container while we put the z-index to -1.
How come the overlay is visible while the z-index is -1? How come only the text and anchor tag are getting z-index of 1?
Edit: I think i got your idea.
As mentioned here by Sir Praveen Kumar , dont use negative z-index, use only positive one i.e z-index:1 and z-index:2 .
.container {
background-image: url(./img/someimg.jpg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 2;
}
.container::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.7;
z-index: 1;
}
<section id="hero">
<div class="hero container">
<div>
<h1>Hello, My Name is </h1>
Porfolio
</div>
</div>
</section>
The reason why pseudo element wasn't entirely under the parent div was because it is a descendants of their associated element. So if you ever want to put the pseudo elements under the parent element, you will have to consider making another div on top of the parent element. Here is the post that I referred to figure my question.
I want two slide revolutions (or at least one), but with this skin over it:
The overlay image would be on top of the images, so clicking the gallery would be impossible (and the bullets to change image inside of it). I know about map coordinates, but it's a slider revolution, so it will not work in this case I think.
Is there any way to achieve this?
My HTML & CSS so far: (JSFiddle)
<div class="thePNG"></div>
<div class="theSLIDERS">
<div class="fakeSLIDER1">HEY' IM CLICKABLE</div>
<div class="fakeSLIDER2"></div>
</div>
.thePNG {
background-image: url(my-overlay-image.png);
width: 787px;
height: 610px;
background-size: cover;
z-index: 2;
position: relative;
}
.theSLIDERS{
margin-top: -600px;
z-index: 1;
}
.fakeSLIDER1{
background-color: red;
width: 700px;
height: 300px;
text-align: center;
margin: 0 auto 0 auto;
}
.fakeSLIDER2{
background-color: green;
width: 700px;
height: 300px;
}
I found my own answer!
its easy:
CSS:
"pointer-events: none;"
!
can someone point me or give a hint, solution on how to modify a modal box which the height are offset to the browser height resolution?
currently if I have a modal box height of 500px by 1200px and my browser is 1280x1024, the modalbox is not scrolling and cannot view the under parts of the box.
I hope you can help me, thank you
TIA
I am assuming you want to set the modal width/height as a percentage of the viewport (e.g. browser window)?
You can do this with CSS providing width and height of html/body are set to 100% first.
As an example, a modal sized to 50% of the viewport and fixed to the center would look like;
<html>
<head>
<style type="text/css">
html, body { margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }
#modal {
width: 50%;
height: 50%;
position: fixed;
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
/* display: none; */
}
</style>
</head>
<body>
<div id="modal">
<h1>modal</h1>
</div>
</body>
</html>
I have a set up where I have three squares, the first two are set up to fade away when the third one is clicked. When you click it what happens though is the first two just disappear, no fading, I can't really figure out why, any thoughts?
http://jsfiddle.net/6fSEz/
that's the fiddle and this is the code by itself:
<html>
<head>
<style>
.box
{
opacity:1;
color: white;
width: 100px;
height: 100px;
}
#box1
{
background-color: green;
}
#box2
{
background-color: red;
}
#box3
{
background-color: blue;
}
.fadeAway1
{
opacity:0;
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
}
.fadeAway2
{
opacity:0;
-webkit-transition-property: opacity;
-webkit-transition-duration: 5s;
}
</style>
</head>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" onclick="box2.className='fadeway1';box1.className='fadeaway2';"
class="box">Tap to fade</div>
</body>
</html>
Thanks in advance for any help.
In the click function you are removing the styles applied by the ".box" class styles. This removes the width and height, etc. Also, CSS and JavaScript are case-sensitive. Capitalization between selectors must match the element attributes, exactly.
Updated jsfiddle: jsfiddle.net/6fSEz/2/
Using the code below, both Chrome and Opera (latest versions supporting border-radius) on Mac show a small blue area outside the rounded corners (which seems to a part of the defined background-image). Why?
<!doctype html>
<head>
<title>Testcase for rounded corners on submit button with bg-image</title>
<style type="text/css">
input[type="submit"] { background: url(http://skriblerier.net/div/rounded-corners-input/bg-bottom.png); color: #fff; height: 40px; width: 150px; border-radius: 10px; border: 1px solid #fff; font-size: 14px }
</style>
</head>
<body>
<form>
<div><input type="submit" /></div>
</form>
</body>
I worked around this with background-clip: http://www.css3.info/preview/background-origin-and-background-clip/
background-clip: padding-box;
-moz-background-clip: padding;
-webkit-background-clip: padding;
FF3.6 does it as well, but not as noticeably (with -moz-border-radius, of course). Looks like they're trying to automatically smooth out the corners, and just can't hide all of the background when there's also a border applied. Removing the border declaration (not the border radius) will fix it. So:
border-radius: 10px; border: 1px solid #fff; making it: border-radius: 10px;
I suspect, but don't know, that this has to do with the difficulties of faking half-pixels and nesting round shapes in more of a bitmap than vector 'space'.