I want to create a site with a background image that always fills the entire window, even if the content can scroll vertically.
I have created this JSFiddle using background-size:cover to scale the background-image to the window.
It works, as long as the divs inside are smaller than the window.
If you scroll vertically, the background image does not fill the page anymore, and shows a white/grey area instead.
So my question is: how can I combine a 100% background image with scrolling content?
This is my CSS:
html {
height: 100%;
margin:0px;
background-color:#999999;
background-image: url(http://s22.postimg.org/e03w9stjl/main_bg.png);
background-position:center;
background-repeat:no-repeat;
background-size: cover;
}
body {
min-height: 100%;
margin:0px;
}
#appcontainer {
position: absolute;
background-color: rgba(255, 255, 255, 0.7);
width:560px; height:2220px;
left:20px; top:20px;
}
And HTML:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="appcontainer">
This div causes the background image to stop scaling to the page.
</div>
</body>
</html>
Use background-attachment: fixed;
Demo
html {
height: 100%;
margin:0px;
background: url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
}
Also, I didn't got why you are using position: absolute; on the wrapper element, generally you should be using position: relative;
Add to your CSS:
background-attachment: fixed;
#appcontainer {
position: absolute;
background-color: rgba(255, 255, 255, 0.7);
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
top: 0;
right 0;
left: 0;
bottom 0;
}
Related
I have a image with the size of 320 * 436 and some particular text data. I need to implement the webpage with the background image as stretch and fit to the screen and the text over the screen. Please help me to implement this using HTML and CSS. Below I have mentioned the code that I have tried. But it does not works:
.container {
position: relative;
}
.center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
<html>
<head>
</head>
<body>
<div class="container">
<img src="background.png">
<p>Data</p>
</div>
</body>
</html>
Thanks in advance
You can achieve this by setting your image as a CSS background image with background size set to cover.
body {
background-image: url(background.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
This will stretch your image to cover the screen, you can then position your text over it.
body {
background: url(background.png);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center fixed;
}
I'm trying to make my background from website so if I'll go to mobile it will stretch it by height in center.
Something from that: large screen to that small screen
my code is:
body{
background-image: url("Tie_logo_shaders.jpg");
background-color: black;
background-size: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
}
Try this code
.bg-img{
background: url("https://s-media-cache-ak0.pinimg.com/originals/27/3e/43/273e43a71854d8359186ecc348370f8d.jpg") no-repeat center center;
min-height: 100%;
position: relative;
}
html,body{
margin: 0;
padding: 0;
height: 100%;
}
<body>
<div class="bg-img">
</div>
</body>
On my landing page i want to set a background image that appears at exact section. My design is currently boxed, so I set up the background image to body, because I want the image to appear on whole width (not just inside my set box width).
body {
background-image: url("bg-image.png") !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-origin: padding-box;
background-position: 0 0;
background-size: 100%;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: -1;
background-position: 0% 70%;
}
Now is the image appearing on 70% of my screen size. How can I set it up it will always appear on position 70% of my entire front page?
If I am setting it up like background-position: 0px 1200px; its not working and its also not responsive.
you could try this code :
body{
background: url(image/bg.jpg) no-repeat center fixed;
-webkit-background-size: cover;
background-size: cover;
}
Let me know if it's what you want.
html {
background: white url(../img/bg.jpg) no-repeat center center;
min-height:100%;
background-size: cover;
}
Here is the css
#bigwrapper{
background-image: url('http://www.w8themes.com/wp-content/uploads/2013/09/Water-Backgrounds.jpg');
background-repeat: no-repeat;
background-position: fixed;
width: 100%;
}
Here is the html
<body id="bigwrapper">...</body>
As i scroll down i want to be able to keep the background image in the same place. I did this with my header and it worked, but hasn't worked out for the background image. Here is how i did it with my header
css below
.header1{
position: fixed;
width: 100%;
margin: -100px auto;
border: 1px solid blue;
width: 1300px;
margin-left: -8px;
background: rgba(107, 168, 237, .8);
background-position: center;
opacity: 0.7;
}
html below
<div id="title" class="header1">
<header><h1 ="title1" class="allTitle">The Water Project</h1></header>
</div>
Use this style:
#bigwrapper {
background-image: url('http://www.w8themes.com/wp-content/uploads/2013/09/Water-Backgrounds.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
width: 100%;
}
You have to use background-attachment: fixed;.
WORKING DEMO
background-attachment: fixed;
The above line will make the background image fixed.
#bigwrapper{
background-image: url('http://www.w8themes.com/wp-content/uploads/2013/09/Water-Backgrounds.jpg');
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
width: 100%;
}
Well, I was creating a fiddle, got sidetracked for a bit before posting, and it looks like others beat me to the punch. Just for the sake of doing something with what I worked on, here is the fiddle.
http://jsfiddle.net/lkritchey/867VX/3/embedded/result/
And like the others said, use
background-attachment: fixed
body
{
background-image: url('../Media/bg3.jpg') ;
background-repeat: no-repeat;
background-size: 100%;
}
bottom of the image is not fit into the screen. I have added background image in css body tag. Width is perfect.But height is not fit into the screen. I saw many examples.but it is not coming.
These two lines are enough to fix and stretch a background image !
body{
background:url('http://www.menucool.com/slider/prod/image-slider-4.jpg') no-repeat fixed;
background-size:cover;
}
JSFIDDLE : -FIDDLE DEMO HERE
U may use following code
body
{
background-image: url('../Media/bg3.jpg') ;
background-repeat: no-repeat;
background-size: 100%;
height:100%;
}
try background-size: cover, it should fit screen
You can set following properties,
Check this Demo jsFiddle
CSS
body {
background: url('../Media/bg3.jpg') no-repeat center center fixed;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
CSS
Check this Demo jsFiddle
background-image: url('../Media/bg3.jpg');
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
background-attachment: fixed;
Add your background image as
background: url(../images/your_image.jpg) fixed no-repeat center center;
background: url(../images/your_image.jpg) no-repeat center center; /* if you don't want it fixed */
for divs inside it use this for complete center
width:100px;
height:100px;
position: absolute;
text-align: center;
left:0;
right:0;
top:0;
bottom:0;
margin: auto;
Now it is working.
body
{
background-image: url('../Media/bg3.jpg') ;
background-repeat: no-repeat;
background-size: 100%;
height:870px;
background-image: url('../Media/bg3.jpg');
}
footer
{
position: absolute;
bottom: 0;
}
Now it fit the full screen.Thank you
remove body tag css class
and add html class to do that
this is the code
`html {
background: url('../Media/bg3.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
`