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%;
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 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;
}
I'm trying to make my image full screen while overflowing the div
pulled from here:
CSS - how to overflow from div to full width of screen
Except instead of using a color, I'm using an image..but I want it to be full screen also. Any ideas?
.main-header:after {
content: "";
position: absolute;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 99vw;
background-size: cover;
background: url(header_bg.jpg) no-repeat center center; /* help */
z-index: -1;
}
Like this?
body{
margin:auto;
}
#for_real,#top{
width:100px;
height:100px;
border:solid;
z-index:100;
}
#for_real img{
position:fixed;
top:0px;
left:0px;
opacity:0.5;
width:100vw ;
height:100vh;
}
<div id='top'>
TOP DIV WITH NO IMAGE
</div>
<div id='for_real'>
DIV WITH IMAGE
<img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT-gpy8G_VpoocZD5L5tuNO_hO_BC9zXl32WCjaHcE-ICiWhL5O'>
</div>
I have this simple html:
<img src="http://i1.ytimg.com/vi/XWGszmviDpA/maxresdefault.jpg" class="bg">
So far i centered the image correctly as long as the window is not smaller than the image. Now i have problems to keep the face in the middle when the window is smaller! How can i fix this?
For me its important that the image height stays 100% of the window.
My css:
img.bg {
width: auto;
height: 100%;
position: fixed;
left:0;
right:0;
margin:0 auto;
}
Thanks!
http://jsfiddle.net/67jDp/1/
Try using it as a background-image.
CSS:
.bg {
background-image:url('http://i1.ytimg.com/vi/XWGszmviDpA/maxresdefault.jpg');
width: auto;
height: 100%;
position: fixed;
left:0;
right:0;
margin:0 auto;
width:70%; //Custom dimension
background-position:center;
background-size:cover;
}
Demo: http://jsfiddle.net/lotusgodkk/67jDp/2/
Try setting the image as the background of a div instead of an img tag
http://jsfiddle.net/CeVwN/1/
.bg {
background-image:url('http://i1.ytimg.com/vi/XWGszmviDpA/maxresdefault.jpg');
background-position:center;
background-size: auto 100%;
background-repeat: no-repeat;
width: auto;
height: 100%;
position: fixed;
left:0;
right:0;
margin:0 auto;
}
You can use this with little javascript
css :
img.bg {
height: 100%;
position: fixed;
left:50%;
}
JS :
var i = $('img');
var w = i.width();
i.css({marginLeft: -w/2});
$( window ).resize(function() {
i.css({marginLeft: -w/2});
});
DEMO : http://jsfiddle.net/67jDp/4/
Set width to 100% to get always the container's width. Then, set height to auto to allow the ratio:
img.bg {
width: 100%;
height: auto;
position: fixed;
left:0;
right:0;
margin:0 auto;
}
Remember to set a max-width to stop expanding when necessary.
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