I have been trying to fit my background image to responsive view, but all I have been getting is cropped image.
.container_bg {
background-image:url("https://i.imgur.com/qjAvmjN.jpg");
height: 1635px; /*My Image height is 1635 px
}
<div class="container_bg">
A
</div>
Now when I switch to "iphone x" view from chrome inspection
Only top left part is shown, How can I adjust the size of background
as per responsive mode.
I also used background-size:100% auto
It shrinks the image and all my contents goes outside the DIV.
Is there a way, or should I make different image size for responsive?
To make your background stretch over, use background-size to stretch it which will mean you don't need the height and background-position will allow you to center the image in the middle of the screen.
.container_bg {
height: 1635px;
background-image:url("https://i.imgur.com/qjAvmjN.jpg");
background-size: cover !important;
background-position: top center !important;
}
<div class="container_bg">
A
</div>
Related
I would like to have an image after the menu, which should have full screen width. The width of the website is not full screen width. On the image I want to show text, but the text should be only within the website with. The image must be responsive. I tried it with a background image,
<style>
.WelcomeMsg {
width: 100%;
height: auto;
background-image: url(/img/peniel_background.jpg);
}
</style>
<div class="WelcomeMsg">
some welcome text
</div>
but the image is not responsive (it does replicate it self), and also the text is on the full width of the screen and not the width of the other content.
then I tried this style:
<style>
.WelcomeMsg {
background-image: url(/img/peniel_background.jpg);
background-position: center center;
background-size: 100%;
}
</style>
it makes the width 100%, but the text on the images is also along the whole width of the screen, and not the reduced width of the other content.The other issue is, that on small screens, it replicates the background image, because the text height is more than the image...
I use .Net Core with bootstrap, so if the solution includes bootstrap, that is also ok.
Any help?
thanks
Current situation: I'm using bootstrap and I have 2 columns next to each other. When I scale the browser window, the image scales with it.
Section on a large display
Section on a smaller screen
The problem: The image that I'm working on is responsively scaling when I scale my browser window.
What I want: Make sure that the image stays full height with the div and crop from the left side.
At its its simplest you can display the image as a background and use the various properties to make sure it stays anchored to the right, with full height and therefore gets cropped from the left as the window decreases in size.
.image {
width: 50vw;
height: 50vh;
background-image: url(https://i.stack.imgur.com/SepTG.png);
background-size: auto 100%;
background-position: right center;
background-repeat: no-repeat no-repeat;
}
<div class="image"></div>
Note: for more modern browsers you could consider an img element and object-fit instead, but this does not work on Internet Explorer.
I am attempting to set the background image for an application, however, the image is zoomed in rather then neatly covering the page. How do I get the image to properly fit to the size of the website.
The code looks as follows:
body {
background: url(http://www.1zoom.net/big2/155/323865-alexfas01.jpg) no-repeat top right;
}
background-size: cover;
From https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
"A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom."
body {
background: url(http://www.1zoom.net/big2/155/323865-alexfas01.jpg) no-repeat top right;
background-size: cover;
}
I'm displaying some images as backgrounds on a webpage but the image isn't displaying entirely 'zoomed out'. Instead, it's taking just the left side for example.
How can I make the image display completely? Is it to do with the resolution?
#kitchenimage{
width:100%;
background: url("siteimages/kitchenimage.jpg") no-repeat center fixed;
padding:200px 0;
}
The image is 3249 x 1679.
Thanks.
Depending on which option prefer, define one of the following:
background-size: cover;
background-size: 100% 100%;
background-size: contain;
The first will scale the background image to be as large as possible so that the background area is completely covered by the background image, leaving some parts of the background cropped while keeping aspect ratio.
The second won't keep the aspect ratio and will cover the background without any cropping.
The third will scale the image to the largest size such that both its width and its height can fit inside the background area.
I have a simple page which should always have its background image centered horizontally.
Here is my css:
body {
background-image: url(htts://url_to_my_image.png);
background-position: top center;
background-repeat: no-repeat;
}
and my jsfiddle:
The problem occurs when the browser window isn't tall enough to fit the entire image. I seem to be unable to scroll to the bottom of the page (thus cannot view the bottom of the image). What am I doing wrong?
background-size: 100% 100%; may help you
UPDATED FIDDLE
ADDED CSS ::
html,body{
background-size:100% 100%;
min-height:100%;
}
and if you want a scroll bar to view the full image then dont use that image using background but display it using <img src="" />
OR..
if you still want to have a scroll bar to show the full image while it is set as backround then set the min-height of your container (in your case html,body) equals to the actual height of the image
MAKING BACKGROUND IMAGE SCROLL