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;
}
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'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>
All right so i have got an image inside a slider and it does not scale properly.
It is first small and then stretches.I want it to be stretched all the way through.How can this be achieved?
Have a look at the screenshots(ignore the red in second screenshot):
And the css:
.slider-wrapper {
width: 310px;
height: 580px;
background: url("images/S4.png") center center ;
background-size: contain;
background-repeat: no-repeat;
}
.nivoSlider {
position:relative;
width:268px;
height:474px;
top:51px;
bottom:0px;
left:21px;
right:23px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
width:268px;
height:474px;
}
And a link to the page:
http://oneapptheme.github.io
You can try this :-
.nivoSlider3 img{height:100% !important;}
use in the css file of image...
background-size: 100%;
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