Hi Folks Here is what i got in css:
#loading {
background:#000 url(loading.png) center;
opacity:0.5;
cursor:auto;
min-height:250px;
z-index:15;
}
#main {
padding: 10px;
z-index:1;
}
and in html:
<div id="loading">
<div id="main">Something here</div>
</div>
and i expect the loading.png to cover the div#main but it doesn't and "Something here" stays on the top of loading.png !?
Update: background is in CSS not an image in loading div.
Your HTML is wrong. The div main should be outside the div loading:
<div id="main">
<div id="loading"></div>
Something here
</div>
You also need to position the latter div using CSS so that it does not just push the main content out from underneath it, as well as sizing the div at 100% of its container's width and height:
#main { position: relative; }
#loading {
background: url("loading.png");
opacity: 0.5;
cursor:auto;
width: 100%;
height: 100%;
z-index:15;
/* Positioning */
position: absolute;
left: 0;
top: 0;
}
Related
i have a parent div with background image and another div inside it. i want background image of parent div only be seen in child div (like an open window).
.parent {
width:800px;
height:600px;
background-image: url("https://via.placeholder.com/150");
}
.child{
width:50%;
margin:auto;
}
<div class="parent">
<div class="child"></div>
</div>
From what I understand, you want an image in backgound and you want to display it inside a child div.
To implement this, you can use WebKit's image masking.
.demo {
width: 200px;
height: 250px;
}
.demo {
position: relative;
float: left;
margin-right: 30px;
}
.demo:before {
content: "";
display: block;
position: absolute;
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg)
no-repeat;
opacity: 0.1;
transition: 0.7s;
}
.demo .has-mask {
position: absolute;
clip: rect(10px, 190px, 190px, 10px);
}
.demo:hover:before {
opacity: 0.4;
}
<div class="demo">
<img src="https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" alt="" class="has-mask">
</div>
More details here: https://css-tricks.com/clipping-masking-css/
Sadly, I can not comment yet. But as far as I understand your question, you want to mask the image of the parent by the child.
Maybe you can achieve this by using the information provided here:
https://css-tricks.com/clipping-masking-css/
But maybe, if you visualize your problem, there is no need for masking or cliping and can be solved way easier.
use
.parent {
width:800px;
height:600px;
background-image: URL(...);
background-size: 100% 100%;
}
I'd like to had a specific design to a webpage i'm designing.
The main wrapper contains a succession of <div class='section'> and <div class='section-header'>. The section-header should display the section's title over an image.
exemple:
<div id="tag" class="section-header">
<h1>Title</h1>
<img src="assets/img/some_image.jpg">
</div>
So far my css is:
.section-header
{
width: 100%;
height: 192px;
overflow: hidden;
}
.section-header > *
{
width: 100%;
line-height: 192px;
margin: 0;
}
.section-header > h1
{
position: absolute;
z-index: 10000;
text-align: center;
}
.section-header > img
{
filter: opacity(50%);
}
however i'd like to add some relative movement between the background image and the section-header. I basically wanted to fixe the image to the screen with position: fixed; and let the overflow: none; do the job.
However it appears that as soon as I add position: fixed; top: 0; to .section-header > img, the overflow isn't hidden anymore and the image is visible regardless of the position of the header it's nested in.
How can I solve that ?
Edit:
devel code is visible here. I'd basically have the image behind each section's title not to scrool with the page, and just to have the section's header reveal it as you scrool
If I understand the effect you want, you may need to use the img as background; try this:
body{
background: #f3f3f3;
height:800px;
}
div {
text-align:center;
color:white;
width:80%;
margin:150px auto;
line-height:200px;
background:url('http://lorempixel.com/600/600') no-repeat center;
background-attachment: fixed;
}
div h1 {
font-size:3em;
}
<div>
<h1>Mytitle</h1>
</div>
Jsfiddle Demo
Overflow is ignored for position:absolute children in parent that is relatively positioned.
One way of fixing the problem is giving .section-header a position:absolute or position:fixed too. (whichever is most useful for you).
like this :
.section-header
{
width: 100%;
height: 192px;
overflow: hidden;
position: absolute;
}
see this jsfiddle
Let's see if I can explain this correctly. I want a header, always visible AND content AND a footer that is hidden behind the content, that becomes visible when scrolled to the footer. Here's what I have so far...
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height:25vh;
width:100%;
background-color:red;
position:fixed;
top:0;
}
#content {
height:120vh;
width:100%;
background-color:green;
position:relative;
}
#bottom {
height:35vh;
width:100%;
background-color:blue;
position:fixed;
bottom:0;
}
<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
</div>
</div>
What this code currently does: Header is hidden behind content and footer is always visible overlapping content.
Here is the current test page... http://next-factor.com/test-layout.php
Much help is greatly appreciated. Thank You!
give a z-index in #top
#top {
background-color: red;
height: 25vh;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
it will make header visible.
and remove position:fixed from #bottom
#bottom {
background-color: blue;
bottom: 0;
height: 35vh;
width: 100%;
}
hope this will solve your problem
here is the working example http://jsfiddle.net/a3ru9d4d/
in this example I have added padding top in the container so that content inside the container will not hide behind the header.
I think you want something like this:-
*{margin:0;padding:0}
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height:25vh;
width:100%;
background-color:red;
position:fixed;
top:0;
z-index: 1;
}
#content {
height:120vh;
width:100%;
background-color:green;
position:relative;
}
#bottom {
height:35vh;
width:100%;
position:relative;
z-index:-2;
background-color:#31353a;
}
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
Footer
</div>
</div>
I hope it will helps you.
Take a look at this. I've introduced two new CSS definitions that achieve what I think you want.
https://jsfiddle.net/b8my8h5j/
I added z-index definitions. The higher the index, the higher it is in a non-static positioning stack. the content header has 30, so it appears above 20 for the content, but the footer has 10, so t's always at the back.
I added a margin-bottom to the content so that there's space for you to scroll down and have the footer be completely visible.
Update:
https://jsfiddle.net/b8my8h5j/1/
Also cleared padding/margin on the body and html tags so that the blocks fit together snugly.
Added a margin-top to the content so that the top of the green box is visible.
I think this produces what you want: z-indexes on all three, and making room at the bottom of content for the footer to show completely when you scroll to the end of the page
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height: 25vh;
width: 100%;
background-color: red;
position: fixed;
top: 0;
z-index: 3;
}
#content {
height: 120vh;
width: 100%;
background-color: green;
position: relative;
margin-bottom: 33vh;
z-index: 2;
}
#bottom {
height: 35vh;
width: 100%;
background-color: blue;
position: fixed;
bottom: 0;
z-index: 1;
}
<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
</div>
</div>
I have the following markup (Fiddle Example Here: http://jsfiddle.net/9gvj11o5/8/)
<div class="header">
<div class="image">
<img src="http://placehold.it/2200x800" alt=""/>
</div>
<div class="menu">This is the menu</div>
<div class="tools">These are the tools</div>
</div>
<div class="content">content</div>
And the following CSS:
.header {
position: relative;
}
.image {
position: absolute;
}
img {
width: 100%;
height: auto;
outline: 0;
}
I need the image to be responsive and have 100% width aligned to top.
But I also need the menu and tools to be over the image and having their normal flow.
Content should be after the image, so after the header.
The image would be the "background" of the header div. (I cannot use background-image)
I am using position but the menu and tools disappear the moment I use it.
What am I missing? Do I need another wrapper div somewhere?
I would wrap the 2 divs .menu & .tools so you need only to apply z-index to the wrapper div instead of each child. which make .menu & .tools (wrapped) in front of the .image.
then change position:absolute to position:relative to .image in order to have .content below header.
Below you can see the snippet, very lightweight.
.header {
position: relative;
}
.image {
position: relative;
z-index:1
}
#menu-all {
position:absolute;
top:0;
z-index:2
}
img {
width: 100%;
height: auto;
outline: 0;
}
<div class="header">
<div class="image">
<img src="http://placehold.it/2200x800" alt="" />
</div>
<div id="menu-all">
<div class="menu">This is the menu</div>
<div class="tools">These are the tools</div>
</div>
</div>
<div class="content">content</div>
You can use z-index to define the layer order of your elements. The smaller the number, the closer to the "bottom" of the stack. So we give the img a very small number, and menu and tools a very large one.
.header {
position: relative;
}
.image {
position: absolute;
z-index: 1; /* here you can use -1 as Paulie_D points out in the comments */
}
img {
width: 100%;
height: auto;
outline: 0;
z-index: 2; /* here you can use -1 as Paulie_D points out in the comments */
}
.menu {
position: absolute;
top: 0;
left: 0;
z-index: 888; /* You can remove this declaration entirely if you set -1 above */
}
.tools {
position: absolute;
top: 0;
right: 0;
z-index: 888; /* You can remove this declaration entirely if you set -1 above */
}
I am trying position 2 or more images on top of another, so I have been testing the following code
#wrapper div{
width: 100%;
}
#header div{
width: 100%;
clear: both;
}
#content div{
position: relative;
overflow: scroll;
}
#image1
{
width:100%;
top: 0;
z-index:2;
position: absolute;
left: 0;
}
#image2
{ margin-left:3px;
position: absolute;
left: 25%;
top: 150px;
z-index: 3;
}
#footer div{
width: 100%;
float: left;
clear: both;
}
<div id="wrapper">
<div id="header">
<h3>Testing Header</h3>
</div>
<div id="content">
<img id="image1" src="http://i.stack.imgur.com/dgg87.png" />
<img id="image2" src="http://i.stack.imgur.com/j7Jpc.png" />
</div>
<div id="footer">
<h3>Testing Foorter</h3>
</div>
</div>
However the header and footer wont show up, I am not sure if I must float something or clear it, I have been testing this on jfiddle and in my own server and nothing, the image tags fill the page, can anyone please show me how to solve this.
Change your CSS rule:
#content div{
position: relative;
overflow: scroll;
}
to:
#content {
position: relative;
overflow: scroll;
height:500px;
}
jsFiddle example
First, #content div isn't being applied to anything since it's looking to select divs within #content which don't exist. By removing the div part of that rule, you apply relative positioning to the content div which allows the absolutely positioned children to be positioned relative to the content container, not the entire page, as what was previously occurring.
Then you can specify a height of the content div as needed.
You can just refer to your header,content and footer as #footer #header #content. There is no need to specify the div tag after them in the css.
Edited JFiddle:
http://jsfiddle.net/50b7qxjs/1/
This is because the z-index in your
#image1{
width:100%;
top: 0;
z-index:2;
position: absolute;
left: 0;
}
Working Demo
Change the z-index value with z-index:-1
Updated fiddle for your requirement.