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;
}
Related
Currently, I create a 1288x200 image (https://jstock.org/images/banner.png).
I want it to shown as 100px height banner. The reason I'm using 2x height, as I want it to look good in retina display.
As you can see in current outcome, it doesn't look good - https://jstock.org/
I try to change from
.banner {
height: 100px;
background: #3B3E44 url('images/banner.png');
}
to
.banner {
height: 100px;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background: #3B3E44 url('images/banner.png');
}
But, the outcome is still the same.
Can anyone provide me some hint, on how to scale down the background image proportionally?
you set your background-size to contain so it contain your image in your height
.banner {
height: 100px;
background: #3B3E44 url("https://jstock.org/images/banner.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
<div class="banner"></div>
I have applied set background-image on one of my <div> with the following properties below:
.mydiv-left {
background: url(path to image) no-repeat center center fixed;
height:auto; // also tried with 100%
background-size:auto // also tried with "100%" and "100% 100%" as well as "cover"
}
This result is no image display, but when I set the height to this image, it cuts off the image. As image is of high resolution and I want it to fit in the smaller area of my div without removing any part/information.
Keep in mind that background image is dynamic and keep on changing for other divs within the loop.
Try this
CSS
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}
If you post the entire code it is easy to find solution.
<div> without content/ height will result in 0 height. I guess that's why you can't see your image.
Give your <div> a size, and background-size should do its work.
http://jsfiddle.net/LsdDE/
.d1, .d2 {
border: 1px solid grey;
width: 200px;
height: 200px;
background: url(https://www.google.com.tw/images/srpr/logo11w.png);
}
.d1 {
background-size: auto 200px;
}
.d2 {
background-size: 200px auto;
}
Simplest suggestion would be to give min-height to your div in pixels... DEMO , keeping your markup same, below is the CSS.
CSS
.mydiv-left {
background: url(http://www.wallng.com/images/2013/08/image-explosion-colors-background-beautiful-263613.jpg) no-repeat center center fixed;
color : #FFF;
min-height:200px; /*this is the key*/
height:auto;
background-size: 100% 100%;
background-repeat: no-repeat;
}
if you give height:auto;, it would scale the div to content height.
if you want to show the div anyway, min-height is a solution
Thanks all for helping me out, I was able to get it done with the following below code:
mydiv {
background: url(images/bg.jpg) no-repeat;
height: 150px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Main thing was last four lines that worked for me the way I wanted.
.mydiv-left {
background-image: url(path to image);
height:(in px);
width: (in px);
background-size: 100% 100%;
background-repeat: no repeat;
background-position: center center;
}
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
I currently have my background set to top right as:
#thedivstatus {
background-image: url("imagestatus.gif");
background-position: right top;
background-repeat: no-repeat;
}
BUT! I need to add a margin-top:50px; from where its rendering via above. Could anyone give me a suggestion?
Thanks
If you mean you want the background image itself to be offset by 50 pixels from the top, like a background margin, then just switch out the top for 50px and you're set.
#thedivstatus {
background-image: url("imagestatus.gif");
background-position: right 50px;
background-repeat: no-repeat;
}
background-image: url(/images/poster.png);
background-position: center;
background-position-y: 50px;
background-repeat: no-repeat;
working in Navbar adding an image in GrapesJs.Display Image in Split
.gjs-block-navbar1{
width: 100%;
height:auto;
background-image: url("./assets/images/navbar/navbar-1.png");
background-repeat: no-repeat;
background-position:center 0px;
background-size:cover;
}
In Sidebar image fix to display center and clear
#div-name
{
background-image: url('../images/background-art-main.jpg');
background-position: top right 50px;
background-repeat: no-repeat;
}
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;
}