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;
}
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 have a CSS background image, but when I resize by browser to go bigger the image moves to the left. How do I keep the image in the same place even when the browser resizes? My code (so far) is:
.home-top {
width: 100%;
background-image: url('../assets/images/home-2x.png');
background-repeat: no-repeat;
background-position: -75px -600px;
margin-bottom: 50px;
}
Any idea's?
I had that issue in the past,
here is an example from my project - LIVE DEMO
drag the editor splitter and watch the reaction of the output.
The trick is in the css:
.general /* the beckground image class */
{
background-image: url('https://clipground.com/images/business-people-handshake-clipart-18.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: 0.95;
-webkit-backface-visibility: hidden;
-webkit-background-size: cover !important;
z-index: -1;
-webkit-transform: translate3d(0, 0);
width: 100%;
height: 100%;
margin: 0 auto;
}
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 try to set background image for body like as:
body {
background: url("http://beerhold.it/1024/800") center bottom;
z-index: 10;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
But It displays image only partially
html {
height: 100%;
}
add this as well. by default the height of html is set to auto so body height can't be 100% unless you set the height of html
Do u use height: 100%. This height based on height of inner content. Not a parrent block.
body {
background: url("http://beerhold.it/1024/800") center bottom;
z-index: 10;
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
}
Add this to your code
background: url("http://3ksks.com/pic.jpg");
background-size: 100% auto;
body {
background: url("http://beerhold.it/1024/800") center bottom;
background-size: 100% 100%;
background-repeat: no-repeat;
background-size: cover;
}
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;
}