How do I keep the background image fixed during a page scroll? I have this CSS code, and the image is a background of the body and not <div></div>
body {
background-position:center;
background-image:url(../images/images5.jpg);
}
background-attachment: fixed;
http://www.w3.org/TR/CSS21/colors.html#background-properties
background-image: url("/your-dir/your_image.jpg");
min-height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;}
Just add background-attachment to your code
body {
background-position: center;
background-image: url(../images/images5.jpg);
background-attachment: fixed;
}
Related
I want to keep my background vertically-aligned (center) for all resolutions of screen. Always in the middle. So i use background-position-y property as "center".
Here is my css:
body {
background: url('https://i.ibb.co/5npL7fr/shutterstock-2179562083-bg-1024x576-small.png');
background-repeat: no-repeat;
background-size: 100% auto;
background-position-y: center !important;
opacity: 1;
}
But i see that my background is vertically on the top, not in center. What is wrong?
Here is jsfiddle - https://jsfiddle.net/opfbn72v/
If You want make it center try with this CSS Code:
body {
background: url('https://i.ibb.co/5npL7fr/shutterstock-2179562083-bg-
1024x576-small.png');
background-repeat: no-repeat;
background-size: 100% auto;
background-attachment: fixed;
background-position: center;
opacity: 1;
}
And If you want to use background-position-y then you have to place the image inside the div tag and then you can use background-position-y center like:
div {
background: url('https://i.ibb.co/5npL7fr/shutterstock-2179562083-
bg-1024x576-small.png');
background-repeat: no-repeat;
background-size: 100% auto;
background-attachment: fixed;
background-position-y: center;
opacity: 1;
}
I'm trying to display a background image with the following CSS code in the header.
body {
background-image: url("./image.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
It works perfectly on desktop, even when I resize the browser window but when I try to access it on mobile, the image gets distorted and stretched to no more than a few pixels at the top of the screen.
Thanks in advance!
Use background-size: 100vw 100vh
body {
width: 100%;
height: 100%;
background-image: url("https://www.highreshdwallpapers.com/wp-content/uploads/2011/09/Large-Format-HD-Wallpaper.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100vw 100vh;
}
<body>
</body>
I'm not sure why but any image I choose for the page's background is never 100% entirely shown. I'm not sure if create-react-app has something to do with it or what but there is always some part of the image that is overflowing and gets cut from the page.
body{
background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
background-size: 100%;
background-position: center;
height: 100vh;
}
I need the image to be shown in its entirety. background-size: 100% doesn't seem to do it inside create-react-app for some reason.
Basically, background-size: 100% will fill the screen with the image, and crop it if necessary.
I think what you want is to see the whole image. You should use contain for that:
html {
width: 100%;
height: 100%;
background: red url('http://media.gettyimages.com/photos/groningen-city-view- picture-id588880579?s=612x612') no-repeat center;
background-size:contain;
}
jsfiddle
This can be done purly with CSS, look for some basic CSS background properties
body{
background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
background-size: cover; //contains these values - auto|length|cover|contain|initial|inherit;
background-position: center;
background-repeat: no-repeat; //contains these values - repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
height: 100vh;
background-attachment: fixed; //contains these values - scroll|fixed|local|initial|inherit;
}
Note: Look for background-attachment property, if you don't need it you can remove it.
Try this:
body {
background-image: url("https://images.unsplash.com/photo-1516849677043-ef67c9557e16?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
overflow: hidden;
width: 100%;
}
how can I add to section responsive background image 100% height? Now I don't have any image.
<section class="takecare">
</section>
takecare{
background-image: url("images/craft.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I think there is a typo mistake.
Your css should look like
.takecare{ background-image: url("images/craft.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }
I suggest you to add the element 'section' before the .takecare in case you want to add some things in this section and customize them without adding a ton of classes and id for nothing.
section.takecare{
background-image: url("images/craft.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Btw the answer of Amab is good, this is just some recommendation.
Greetings.
height: 100% doesn't work with if parent node doesn't have a fixed height. Try to add a fixed height like:
.takecare{
background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/34/70_Years_Porsche_Sports_Car%2C_Berlin_%281X7A3888%29.jpg");
height: 200px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<section class="takecare"></section>
I have a photo type (not landscape) background image with 979px width by 1200px height. I would like to set it to float left and show 100% full image height fixed, without the need to scroll up/down (regardless of content length).
This is my CSS code, but it is not working:
img, media {
max-width: 100%;
}
body {
background-color: white;
background-image: url('../images/bg-image.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
You can do it with the code you have, you just need to ensure that html and body are set to 100% height.
Demo: http://jsfiddle.net/kevinPHPkevin/a7eGN/
html, body {
height:100%;
}
body {
background-color: white;
background-image: url('http://www.canvaz.com/portrait/charcoal-1.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
CSS can do that with background-size: cover;
But to be more detailed and support more browsers...
Use aspect ratio like this:
aspectRatio = $bg.width() / $bg.height();
FIDDLE
body{
background-image: url("your_image_src");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
}
it can cover full height and width as well
html, body {
height:100%;
}
body {
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;
}
This worked for me (though it's for reactjs & tachyons used as inline CSS)
<div className="pa2 cf vh-100-ns" style={{backgroundImage: `url(${a6})`}}>
........
</div>
This takes in css as height: 100vh