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
Related
I wanna know how I can make the div's background responsive
My code:
height:500px;
background-image: url(../images/Doctor.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
The result:
When i zoom out :
The problem is when I zoom in or out I want the doctor image fixed in zoom not in scroll
In order to make it responsive, try the following snippet. Do not set width, height, or margins.
body {
background-image: url(https://cdn.dribbble.com/users/394/screenshots/196178/attachments/3368/background-circles.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
span {
color: tomato;
font-weight: bold;
font-size: 2em;
margin: 0;
padding: 0;
position: absolute;
top: 50%;
}
<span>Responsive Background<br/>Image</span>
try this
height: auto;
background-image: url(https://cdn.dribbble.com/users/394/screenshots/196178/attachments/3368/background-circles.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
I have a template which has a background image with background-attachment: fixed; in the header. Please see the link attached:
http://simpleqode.com/preview/wolfram/2.2.2/index_crossfading.html
body.classic .welcome_classic {
display: table;
height: 100%;
min-height: 100%;
width: 100%;
background-image: url(../img/bg-pattern_alt.png), url(../img/screen-bg_11.jpg);
background-position: top left, center center;
background-size: auto, cover;
background-repeat: repeat, no-repeat;
background-attachment: fixed;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.18);
}
The problem is that on iPhone the background image gets 'zoomed' multiple times you can't see the image.
Removing background-attachment: fixed; resolves the issue. Any ideas?
I tried so much! But I think my problem is a little more special than the other solved questions:
Here is the side:
fruehstarter.com
I have a problem with the background on mobile devices.
My client wanted a special background, it's fixed with 100% width and height. On a mobile device you need to zoom in to identify the content.
But if you scroll down and the browser line disappears, the background-image jumps because of the new height.
Either I have the jumping background or I have a white border at the end of the side with the height of the browser line.
Hope you understand my problem and can help me. Thanks a lot!
EDIT: What I've tried:
background:cover not scaling on mobile browsers
Background image jumps when address bar hides iOS/Android/Mobile Chrome
And I've tried to give my div ".bg" and ".container-fluid" another positions (changed to "absolute" and "relative") or give another div the background.
EDIT 2nd:
Here is the CODE: jsfiddl
HTML:
<div class="container-fluid">
<div class="bg"></div>
<div class="row">
<div class="linkbox"></div>
</div>
</div>
CSS:
html {
font-size: 10vh;
height: 100%;
font-family: 'Titillium Web', sans-serif;
}
body {
-webkit-overflow-scrolling: touch;
min-height: 100%;
width: 100%;
position: relative;
}
.container-fluid {
height: 100%;
overflow-x: hidden;
position: absolute;
width: 100%;
}
.row {
height: 100%;
position: relative;
}
.bg {
overflow: hidden;
position: fixed;
width: 100%;
height: auto;
min-height: 10rem;
padding-left: 15px;
padding-right: 15px;
margin-left: -15px;
margin-right: -15px;
z-index: -1;
background: url('http://fruehstarter.com/wp- content/themes/fruehstarter/library/images/fs_klingelschildMobil6.jpg') no-repeat;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-position: center center;
background-attachment: fixed;
}
JAVASCRIPT:
jQuery(document).ready(function () {
if (navigator.userAgent.match(/(iPad|iPhone|iPod|Android)/g)) {
$('html').css('font-size', Math.ceil($(window).height() / 10));
$('.bg').css('overflow-y', 'scroll');
$('body').scrollTop(1);
}
}
It would be helpful to share your code.
I think
background-attachment: fixed;
in addition is what your are looking for.
Example:
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
Update
Try this:
body {
background: url('http://fruehstarter.com/wp- content/themes/fruehstarter/library/images/fs_klingelschildMobil6.jpg') no-repeat;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
I think defining background inside the body, in your case, is more comfortable.
I have an image that I am using inside a Div.
I was wondering how I could center the image both vertically and horizontally at all times.
At the moment, when I stretch it, it seems to be stretching from the top left corner, is there a way I could have it centered at all times.
I have searched the web and tried various things but can not seem to get it to work.
this is my html:
<div class="container"></div>
here is my css:
.container {
width: 100%;
height: 75vh;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Any help or advice is appreciated, thank you in advance.
EDIT you can see that when I stretch the browser, it
seems to be stretching from the left, i want to be able to have the
Image centered so it stretches from all sides equally*
I got the solution..!
Here is your html file :
<div class="container"></div>
CSS file :
.container {
width: 100%;
height: 75vh;
position: absolute;
margin: auto;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
top: 0;
left: 0;}
Here is working demo
background-position: center will align your image in vertical and horizontal center.
Check below snippet:
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-repeat: no-repeat;
background-position: center;
}
<div class="container"></div>
.container {
width: 100%;
height: 75vh;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size:auto;
}
<div class="container"></div>
HTML :
<div class="container"></div>
CSS :
.container{width: 100%;height: 75vh;position: absolute;margin: auto;background-image: url("http://i.stack.imgur.com/2OrtT.jpg");background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;top: 0;left: 0;}
The code below works just fine on desktops. But on mobiles the images doesn't centralize correctly
<style>
html, body
{
margin: 0px;
padding: 0px;
height: 4000px; /* just an example */
}
</style>
<div style="
background-image: url('img/bg1.jpg');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: contain;
width: 100%;
height: 100%;
z-index: 998;">
</div>
I want it fixed on the center of the screen.
It will work for you i guess.
<style>
html, body
{
margin: 0px;
padding: 0px;
height: 100% !important; /* #nicfo advice, for working on mobiles */
}
</style>
<div style="
background-image: url('http://www.w3schools.com/images/w3schools.png');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: 100% 100%;
background-size: contain;
width: 100%;
height: 100%;
z-index: 998;">
</div>
to stretch the image to fill the screen:
background-size: 100% 100%;
to fill screen without stretching the image:
background-size: cover;
source