This might be the dumbest question, but Im building a single page website, where you have to scroll down to get to the "next page".. It has one background in a fixed position div and so far Ive only implemented css and html. Havent even started the real work.. Just sort of testing the design.. how I'd like to have things.
It works just fin under Chrome and Firefox, but almost dies on Safari.
I wonder if its just my mac or theres something to the way I do things. Safari does not like overlaying divs, or what?! :(
HTML
<div id="background"></div>
<div id="container">
<div id="header">Page title</div>
<!--menu comes here later on-->
<div id="content">CONTENT</div>
</div>
CSS
#background {
position:fixed;
top:0px; left:0px;
width:100%; height:100%;
background:url(bg.jpg) no-repeat center center fixed;
-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;
}
#container {
position:absolute;
top:0px; left:0px;
width:100%; height:100%;
}
#header {
position:absolute;
top:2%; left:7%;
font-family:"Times New Roman";
font-size:50px;
color:#ffffff;
}
#content {
position:absolute;
top:100%;
width:100%; height:1000px;
background:#ffffff;
box-shadow:0px -3px 25px #252525;
}
Any ideas?!
Thanks!
Related
having a problem here. I have a got my skewed div perfect but now I want the image to fit in it without tiling so if anyone can help that would be awesome.
I'm going for this:
And so far I have this:
HTML
<div class="box"></div>
CSS
.box {
position:relative;
width:100%;
height:500px;
background: url(../images/clouds.jpeg);
background-size:contain;
padding:10px;
margin-bottom:100px;
}
.box:after {
position:absolute;
content:'';
width:100%;
height:100%;
top:0;
left:0;
right:0;
background:inherit;
background-size:contain;
transform-origin: top left;
transform:skewY(10deg);
z-index: -1;
}
You should use background-size: cover if you want the img to fill the entire container, and then use background-repeat: no-repeatto have one image.
Something like that should work:
.box {
position:relative;
width:100%;
height:500px;
background: url(../images/clouds.jpeg);
background-size:cover;
background-repeat: no-repeat;
padding:10px;
margin-bottom:100px;
}
That image is not skewed..
div{
display:inline-block;
margin:10px;
postion:relative;
width:100px;
height:100px;
background:cyan;
}
div.covered{
background:
linear-gradient(20deg,white,white,40px,transparent 40px,transparent),cyan;
}
<div>
normal
</div>
<div class="covered">
covered
</div>
Bottom-left part can be done by covering image with white color with tilted linear gradient.
I'm fairly new to web design and I've been working on a pure CSS layered parallax page, like a landscape effect with overlapping div containers stacked at different depths... and to my pleasure I got it working perfectly in Chrome.
However when I load it in Firefox (ver. 47) (using Windows 10) it looks fine until I scroll down. My divs and their content completely disappear after various points and reappear when I scroll back up. Alternatively I can resize the browser and everything reloads perfectly, but will disappear again if I continue scrolling.
In IE and Edge the content disappears after completely scrolling off the top and doesn't appear when I scroll back up. Only reappears after resizing.
I have tried adding the browser specific prefixes and what not and that didn't help at all. I also tried changing the perspective value as noted in a similar post but that didn't fix it either. What is causing this discrepancy between the presentation in chrome and the others?
Here is my code, I have replaced the div background images with colors.
Thanks
HTML:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="../CSS/Styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<img id="bannerlogo" src="http://placehold.it/350x65">
<div id="back1">
<p id="text1">Splash Text 1</p>
</div>
<div id="back2">
<p id="text2">Splash Text 2</p>
</div>
<div id="back3"></div>
<div id="back4"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
CSS:
html {
height: 100%;
overflow:hidden;
}
body {
text-align:center;
margin:0;
padding:0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-y: visible;
overflow-x: hidden;
background-image: url(../IMAGES/Layer1.jpg);
background-size: cover;
background-attachment:fixed;
}
#text1, #text2{
position:relative;
font-weight:normal;
font-family:courier new;
}
#bannerlogo{
width:75%;
max-width:700px;
}
#text1{
left:-10%;
top:60%;
font-size:4vw;
}
#text2{
left:-5%;
top:60%;
font-size:4vw;
}
#content{
position:relative;
height:700px;
width:100vw;
background-color:rgb(3,0,20);
z-index:10;
}
#footer{
position:relative;
height:150px;
width:100vw;
background-color:rgb(30,30,50);
z-index:15;
}
#back1, #back2, #back3, #back4{
position:relative;
right:0px;
background-size:cover;
width:100vw;
height:100vh;
min-width:1280px;
min-height:720px;
background-size: 100% 100%;
text-align:center;
font-family:verdana;
font-size: 200%;
color:white;
font-weight:bold;
letter-spacing:5px;
line-height:100%;
transform-style:inherit;
min-height:100vh;
}
#back1{
background-color:rgb(100,100,150);
transform: translateZ(-5px) scale(6) translateY(0%);
z-index:-1;
margin-bottom:-30vh;
}
#back2{
background-color:rgba(100,150,100,.7);
transform: translateZ(-2px) scale(3.5);
}
#back3{
background-color:rgba(150,100,100,.5);
transform: translateZ(-1px) scale(2) translateY(-25%);
}
#back4{
min-height:0px;
height:30vh;
background-color:rgb(3,0,20);
transform: translateZ(-1px) scale(2) translateY(20%);
margin-bottom:-30vh;
}
All the other divs worked well but when i got to this point it does not want to center it for some reason? I'm i missing something?
Take a look at the image link. The menu items is what i want to set the auto margins to. The margin for the ehigh works but not the sides.
http://i.imgur.com/PckN9jX.jpg
.Menuitems {
position:absolute;
margin: 120px auto;
width:398px;
height:26px;
z-index:11;
border-style: solid;
}
#mitem1 {
position:absolute;
background-image:url(http://i.imgur.com/cyKwZQj.png);
background-repeat:no-repeat;
background-position:center;
top:0;
left:0;
width:75px;
height:26px;
z-index:6
}
#mitem1:hover {
background-image:url(http://i.imgur.com/BMHScgr.png);
background-repeat:no-repeat;
background-position:center
}
#mitem1:active {
background-image:url(http://i.imgur.com/4Y4sMtq.png);
background-repeat:no-repeat;
background-position:center
}
#mitem2 {
position:absolute;
background-image:url(http://i.imgur.com/GiAoMqC.png);
background-repeat:no-repeat;
background-position:center;
top:0;
left:77px;
width:75px;
height:26px;
z-index:7
}
#mitem2:hover {
background-image:url(http://i.imgur.com/XQKv9yC.png);
background-repeat:no-repeat;
background-position:center
}
#mitem2:active {
background-image:url(http://i.imgur.com/KQ07YMK.png);
background-repeat:no-repeat;
background-position:center
}
#mitem3 {
position:absolute;
background-image:url(http://i.imgur.com/UPERy0F.png);
background-repeat:no-repeat;
background-position:center;
top:0;
left:154px;
width:90px;
height:26px;
z-index:8
}
#mitem3:hover {
background-image:url(http://i.imgur.com/EqkUtsr.png);
background-repeat:no-repeat;
background-position:center
}
#mitem3:active {
background-image:url(http://i.imgur.com/k54mb7V.png);
background-repeat:no-repeat;
background-position:center
}
#mitem4 {
position:absolute;
background-image:url(http://i.imgur.com/QHExEjQ.png);
background-repeat:no-repeat;
background-position:center;
top:0;
left:246px;
width:75px;
height:26px;
z-index:8
}
#mitem4:hover {
background-image:url(http://i.imgur.com/BjKCQbw.png);
background-repeat:no-repeat;
background-position:center
}
#mitem4:active {
background-image:url(http://i.imgur.com/EVwDUoB.png);
background-repeat:no-repeat;
background-position:center
}
#mitem5 {
position:absolute;
background-image:url(http://i.imgur.com/oKrhDAE.png);
background-repeat:no-repeat;
background-position:center;
top:0;
left:323px;
width:75px;
height:26px;
z-index:8
}
#mitem5:hover {
background-image:url(http://i.imgur.com/gnLuhed.png);
background-repeat:no-repeat;
background-position:center
}
#mitem5:active {
background-image:url(http://i.imgur.com/iqFh66v.png);
background-repeat:no-repeat;
background-position:center
}
#menuline {
position:absolute;
background-image:url(http://i.imgur.com/4xOPK1I.png);
background-repeat:no-repeat;
background-position:center;
left:75px;
top:0;
width:2px;
height:26px
}
#menuline2 {
position:absolute;
background-image:url(http://i.imgur.com/4xOPK1I.png);
background-repeat:no-repeat;
background-position:center;
left:152px;
top:0;
width:2px;
height:26px
}
#menuline3 {
position:absolute;
background-image:url(http://i.imgur.com/4xOPK1I.png);
background-repeat:no-repeat;
background-position:center;
left:244px;
top:0;
width:2px;
height:26px
}
#menuline4 {
position:absolute;
background-image:url(http://i.imgur.com/4xOPK1I.png);
background-repeat:no-repeat;
background-position:center;
left:321px;
top:0;
width:2px;
height:26px
}
<div class="topbox">
<!-- Menu Items -->
<div class="Menuitems">
<a href="#">
<div id="mitem1"></div></a> <a href="shows.html">
<div id="mitem2"></div></a> <a href="codes.html">
<div id="mitem3"></div></a> <a href="about.html">
<div id="mitem4"></div></a> <a href="contact.html">
<div id="mitem5"></div></a>
<div id="menuline"></div>
<div id="menuline2"></div>
<div id="menuline3"></div>
<div id="menuline4"></div>
</div>
<a href="#">
<div class="divlogo"></div>
</a>
</div>
The absolute positioning takes it out of the flow of the page and causes the centering from the auto margins not to work.
.topbox {
position:absolute;
width:100%;
z-index:11;
}
.Menuitems {
margin: 120px auto;
width:398px;
height:26px;
border-style: solid;
}
Will get the menu div positioned correctly. Get rid of all the absolute position on your menu items.
I made this Plunker it might be what you're looking for. http://plnkr.co/edit/wcRaJqvg0fsPT9HcBynf?p=preview
Block level elements are greedy. They use margins to take up the entire horizontal space they're in so that nothing is inline with them. If you set auto on both left and right then both sides want all the space, so they share - resulting in a centred object.
If you use position:absolute or fixed on a block level element it removes this greedy behaviour from the element.
Change the position of .Menuitems to relative and that should fix the issue.
Ok I have a background that has a clear area that I have balanced content inside and I want it to slide under the top of the image when the user scrolls it up. I have a jsfiddle with it, excuse my sloppy css I have been trying everything to get this to work. I also have a floating nav bar that it should slide under also.
http://jsfiddle.net/CFFwA/
#charset "UTF-8";
/* CSS Document */
html,body {
height:100%;
width:100%;
}
body{
background-image:url(images/1920w.png);
background-size:100%;
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
background-color:#E9C9A0;
z-index:5;
}
#bod{
width:100%;
height:100%;
background-image:url(images/1920w.png);
background-size:100%;
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
left:0;
z-index:20;
}
#bann{
width:62.5%;
height:100%;
z-index:10;
}
#head{
position:fixed;
margin-top:8.5%;
margin-right:18.75%;
margin-left:18.75%;
width:62.5%;
height:100%;
z-index:32;
}
#content{
padding-top:14%;
width:62.5%%;
height:100%;
margin-left:auto;
margin-right:auto;
z-index:4;
}
An easy fix would be to make your image a separate element with position:fixed
HTML
<img src="/path/to/bg.png" id="body-bg" />
CSS
#body-bg {
width: 100%;
position: fixed;
top: 0;
}
Check the fiddle
I have a layout I'm making and the idea is cards and they are layed out in a stack and the left and right sides of the stack can be seen when one card is brought forward with z index. I have the layout made but I'm now banging my head against a wall trying to figure out how to use z-index with the divs because the divs are already in a parent that has a specific position.
Layout location ~
To use z-index, I would need to give "card" an absolute position, but that ruins the margin making the cards stack on top of eachother. Any ideas?? THANKYOU IN ADVANCE AND HAPPY HOLIDAYS!
Below is a sample:
(It's a Tumblr theme for reference}
HTML:
<div id="page">
<div id="content_container">
<div id="content">
{block:Posts}
<div class="card">
{Tags in here create multiple <div class="card"></div>'s}
</div>
{/block:Posts}
</div>
</div>
</div>
CSS:
html {
height: 100%;
width:100%;
}
body {
height:100%;
width:100%;
font-family:'HelveticaRegular', Helvetica, Arial, Sans-Serif;
color:#FFF;
background:#000;
overflow:hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0;
padding:0;
}
#page {display:table;margin:0px auto;height:100%;width:100%; background:#FF0000;
width:969px;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/
#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/
*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/
#content_container{display:table-cell;vertical-align: middle;}
.card {
margin-right:-670px;
float:left;
width:700px;
height:500px;
background:#EEE;
-moz-box-shadow: 2px 2px 2px 2px #000;
-webkit-box-shadow: 2px 2px 2px 2px #000;
}
Use position: relative? That allows z-index but doesn't remove from the document flow in the same way.