I have made a background that needs to cover the whole page. I know this is a simple question to most of you, but i have tried everything!!! Every time i try something, it just covers the parent div. I want it to cover the entire webpage! Here is what i have so far.
<div id="bkgrd" style="z-index: 9999; display: none; position:absolute;top:25%;left:25%;right:25%;
bottom:25%;
margin:auto;
min-width:50%;
min-height:50%; background-color: #000000; opacity: 0.4;"></div>
#bkgrd {
position:fixed;
top:0;
left: 0;
width:100%;
height:100%;
}
Related
http://www.thinkstudio.co.za/Untitled-1.html
All is in one html file, using css amd html. I have tried using z-index, it works, but the moment you hover over the pop box area, it gives problems (please see link above) Has this to do with div positioning? I need 2 divs with content inside the container area, and once you hover over it, there needs to be a popup, if there is any other easier way, please help!
Is this what you're looking for? https://jsfiddle.net/53LyLmy9/
What I did was creating a JQuery event where whenever the mouse enters the popup or the box, the popup would show, and when the mouse left, it would hide.
$('#box,#popup').mouseenter(function(){
$('#popup').show();
});
$('#box,#popup').mouseleave(function(){
$('#popup').hide();
});
The problem is when you hovering .box it loose hover at link that was trigering .box display.
Fixed your problem like this
.box:hover {
display:block;
}
I would suggest learning about position: relative and child elements with position: absolute, and By using a div with style z-index:1; and position: absolute; you can overlay your div on any other div.
z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index. Note that this property only works with positioned elements.
The problem is when you hovering .box it loose hover at link that was trigering .box display. Try this fiddle: https://jsfiddle.net/Jyde/2sodLq6y/
.box {
display: none;
position: absolute;
background: #215273;
width: 200px;
height: 100px;
float: left;
color: white;
margin-top: -30px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 90px;
text-align: center;
z-index:1;
}
.topdiv{
height:250px;
width:250px;
}
.container{
width:400px;
height:600px;
background-color:white;
color:white;
/*Important:*/
position:absolute;
z-index: 10;
}
.left{
width:200px;
height:300px;
background-color:#bda97f;
float:left;
position:absolute;
}
.link-spanner{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
}
a:hover + .box {
display:block;
}
.box:hover {
display:block;
}
I have an image that isn't as big as all screen sizes, yet I want it to be displayed on screens with whatever width by adding a repeated pattern on either side. I can of course make the image a lot wider but that would cause the page to load a lot slower as well.
It's a bit hard to explain by text so here are some images and the JSFiddle Demo.
#layer_top {
background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
width:100%;
height:136px;
}
#layer_transition {
width:100%;
height:36px;
margin-top:-36px;
background-image:url("http://puu.sh/cajG0/2768274649.png");
background-repeat:no-repeat;
background-position:center;
}
#layer_bottom {
width:100%;
height:100px;
background:url("http://puu.sh/cajmN/9b1e9ef79f.jpg") repeat;
}
<div id="layer_top"></div>
<div id="layer_transition"></div>
<div id="layer_bottom"></div>
Result:
Wanted Result:
You could achieve that by adding a pseudo-element to the top layer which is formed as ellipse and it's positioned with the respect of the layer.
Then simply apply the same background image to both, layer and the pseudo-element:
Example Here
#layer_top, #layer_top:after {
background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
}
#layer_top { width:100%; height:136px; position: relative; }
#layer_top:after {
content: "";
position: absolute;
z-index: -1;
width: 500px; height: 100%;
left: 0; right: 0; top: 20%;
margin: auto;
border-radius: 50%;
}
You could also use clip to cut the extra part of the oval shape.
A bit of a different solution but it might just work:
Why don't you replace the mask image? So instead of overlaying this gray thing, make an overlay for the purprle one. If you position that centered against the top of the grey area, you've got the same result/
Well, the problem is with the div elements you created its hard to get it work.
An easy solution is to use for the bottom part 3 diffrent divs.
<div id="side_layer"></div>
<div id="layer_bottom"></div>
<div id="side_layer"></div>
I created a simple jsfiddle for you: jsfiddle
It does work responsive until 500px width.
You could simply add a media query and hide the right and left layer then.
You can do this it is easy.
Add CSS class to body or create parent div above body and style it.
Working Fiddle
http://jsfiddle.net/7n06und5/11/
.parent {
margin:0;
background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
width:100%;
}
#layer_top {
background:url("http://puu.sh/cajm0/c0c2cc9475.jpg") repeat;
width:100%;
height:136px;
}
#layer_transition {
width:100%;
height:36px;
margin-top:-36px;
background-image:url("http://puu.sh/cajG0/2768274649.png");
background-repeat:no-repeat;
background-position:center;
}
#layer_bottom {
width:100%;
height:300px;
background:url("http://puu.sh/cajmN/9b1e9ef79f.jpg") repeat;
width:500px;
margin:0 auto;
}
HTML
<body class="parent">
<div id="layer_top">
</div>
<div id="layer_transition">
</div>
<div id="layer_bottom">
</div>
</body>
Hope it helps you!
you can try this with css border-raidus
HTML
<div id="header">
<div id="inner"></div>
</div>
CSS
#header{
background:url(http://puu.sh/cajm0/c0c2cc9475.jpg) repeat-x;
//height:75px;
//width:100%;
padding:3% 15%;
}
#inner{
background:url(http://puu.sh/cajm0/c0c2cc9475.jpg) repeat-x;
height:75px;
width:100%;
border-radius:0 0 50% 50%;
}
Fiddle Demo
I'm busy on this new website thing, and I run into a problem. Normally, when making the menu, I would just use the entire space, like 100% width and maybe 100px height but now, I need just a portion of that, so there is a whitespace next to the menu on both sides.
I tried to get the square, that carries the menu, to the absolute top of the page, most obvious solution:
position:absolute;
top:0;
But now, the square is also moved to the absolute left of the page, instead I want it centered, but I can't get there. This is a piece of my CSS:
body, html {
background-color: #ecf0f1;
position: absolute;
top: 0;
margin: 0 auto;
}
.navbox {
background-color: #000;
height:100px;
width: 700px;
margin: 0 auto;
}
Is there anyone with the solution?
position:absolute;
top:0;
left:0;
right:0;
Adjust left and right to suit your desired margins.
You would probably want to set your left and right to percentages, using 50% for both will center it:
#menu {
position:absolute;
top:0;
width: 70px;
height:180px;
left: 50%;
right: 50%;
background-color: red;
}
Also, if you are not using absolute positioning you can do the same with this margin-left and margin-right.
jsfiddle
.overlay{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:url(hex-shape.png) no-repeat center;
z-index:99999;
}
My background image is an overlay for the entire page. I would like to fill the rest of the page with white surrounding the overlay image but not within it.
I am using it to frame a picture in the middle of the screen.
The idea is the page can be a full color behind the background image and still be invisible because of the border or whatever gets put around the image.
.overlay{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
background: #{your_color} url(hex-shape.png) no-repeat center;
z-index:99999;
}
If you know the size of the picture, this is an easy way to center an image in the middle:
HTML:
<div id="container">
<img id="placekitten" src="http://placekitten.com/g/200/300">
</div>
CSS:
#placekitten {
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -100px;
z-index: 9000;
}
#container {
height: 500px;
border: solid black 1px;
}
The key is to make the margin-top equal to -1 * height/2 and the margin-left equal to -1 * width/2. You do have to set these values manually for this to work, however.
FIDDLE
dont realy understand what you need but i think this will help
use stretch technique :
.overlay{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background:url(hex-shape.png) no-repeat center;
z-index:99999;
}
play with the top, left, right, bottom values
Alright guys here my problem,
Im trying to make my
<div id="content" style="margin:0 auto;"><!--AJAX Loaded Content--></div>
take as much height as it can between my
<div id="header" style="position:fixed;top:0;width:100%;height:300px;"></div>
and my
<div id="footer" style="position:fixed;bottom:0;width:100%;height:200px;"></div>
The only css rule I have is
html,body{position:fixed;height:100%;width:100%;}
I tried using height:100%; on my #content but it still display as a height:auto;...
Also, the whole thing still needs to display properly on mobile.
So my question is: what CSS rule(s) should I add/remove to make my #content take the whole space between the two other <div>'s?
http://jsfiddle.net/8AQQg/2/
As I said in my comment, you can't flow around fixed or absolutely-positioned elements. One approach might be to use an absolutely-positioned div with the same top and bottom dimensions as the heights of your #header and #footer:
http://jsfiddle.net/G3k54/2
html, body {
position:fixed;
height:100%;
width:100%;
}
#header {
position:fixed;
top:0;
width:100%;
height:30px;
}
#footer {
position:fixed;
bottom:0;
width:100%;
height:20px;
}
#content {
position: absolute;
top: 35px;
bottom: 25px;
width: 100%;
}