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
Related
i want to implement a proportional background image.
this code i have try but then the scrolling doesnt works and the other divs are in background and not visible?
.background {
background-image:url(xx);
background-position:50% 50%;
background-size:cover;
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
}
Have you maybe a better idea?
Thanks
If you try to fix the div behind the other elements you have to send it via z-index.
.background
{
background-image:url(xx);
background-position:50% 50%;
background-size:cover;
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
width:100%;
height:100%;
z-index:-1;
}
The z-index will set the z axis less than the others. And you'll be able to set it like background.
Add following to your background class
z-index: -1;
width: 100%;
height: 100%;
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 want to put my picture in the background to take the entire screen but image is not repeating.
Screenshot
<div id="backgrounddiv">
<img id="background" src="http://i.imgur.com/nhQAcos.jpg">
</div>
#background {
width:100%;
height:100%;
image-repeat: repeat;
}
#backgrounddiv {
position: absolute;
z-index:0;
left:0;
top:0;
width:100%;
height:100%
}
What you want to be using is background-repeat
The css syntax:
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
So it should look like this:
div {
background-image:url(http://i.imgur.com/nhQAcos.jpg);
background-repeat:initial;
}
or if you want it to repeat vertically...
div {
background-image:url(http://i.imgur.com/nhQAcos.jpg);
background-repeat:repeat-y;
}
When I use the following code the background image isn't being displayed are there any prerequisites to display a background image ?
<section class="starter"></section>
.starter
{
background-image:url("Assets/Images/Section.jpg");
background-size: cover;
background-repeat:repeat-x;
width:100%;
height: 100px;
top:0px;
left:0px;
}
Here is a fiddle to your code:
http://jsfiddle.net/xywzx4uv/
(Note: I used another image and removed the broken comment)
.starter
{
background-image:url("http://lorempixel.com/output/nature-q-c-1244-102-1.jpg");
background-size: cover;
background-repeat:repeat-x;
width:100%;
height: 100px;
top:0px;
left:0px;
}
It is working as intended, so there must be an error with the image-path.
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!