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?
Related
So you'll see in my example, I have a gradient applied to html and a texture overlay .png on body which at first looks as expected.
I added a div with a large height to show my issue. Notice as you scroll down in the example you see the div overflow body and the texture overlay applied to body gets cut and almost has a parallax effect.
What I want is the html/body backgrounds to stay fixed so the content of body will scroll over them as expected while the gradient and overlay stay stationary and the size of the window. I'm thinking you'll notice what I'm talking about pretty easily with the example.
What am I missing here?
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
html {
background: radial-gradient(#bcd197, #325757);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
body {
outline: blue 3px dashed;
background-image: url("https://i.ibb.co/NFvCfrj/texture.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
div {
outline: red 3px dashed;
height: 200rem;
width: 10rem;
background-color: rgba(0,0,0,.5);
margin: 1rem;
}
<div></div>
You're setting the body's height to 100%, so the background no longer render below the initial viewport height.
You must set the same div height to the body or mark body height to auto (default value).
html {
height: 100%;
width: 100%;
}
html, body {
margin: 0;
padding: 0;
}
body {
height: auto;
width: auto;
}
html {
background: radial-gradient(#bcd197, #325757);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
body {
outline: blue 3px dashed;
background-image: url("https://i.ibb.co/NFvCfrj/texture.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
div {
outline: red 3px dashed;
height: 200rem;
width: 10rem;
background-color: rgba(0,0,0,.5);
margin: 1rem;
}
<div></div>
I want to cover my page with a background image and I am using a jumbotron which covers all components of page but its size is not cover all page. So, I also attached a background image to .html in my css file.
.jumbotron {
padding: 1rem 1rem;
background-color: #e9ecef;
height: 100%;
background-size: cover;
background-image: url('background.jpg');
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
background-image: url('background.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Now, image look like a broken mirror. How can I made it look like a single image? Or what is the logical way of doing this?
you can apply background image on body tag.
body {
width:100%;
background-image: url('background.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
You can try this,
body {
margin: 0;
height: 100vh;
background-image: url(background.jpg);
background-size: cover;
background-position: center;
}
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;
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