I have a lead background image which is positioned right. I want to achieve when resizing the browser window, that the bg image will be cropped from right side.
Now it is only moving along the browser window, but I need to crop the right size as I resize it.
My current code:
<div style="background: url(assets/img/leadspace.jpg) top right no-repeat #1d2f93;height: 360px;"></div>
use background-size: auto; background-repeat: no-repeat; remove the top and right align. if you want top right alignment for higher version(desktop view) use media query.
check the demo
Related
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'm Making a multiple background image, and I want an image(flower image) to be going vertically if the browser is been resize accordingly.
Below is a screenshot of the background image I want the flower hand to go up anytime I'm resizing the browser.
https://imgur.com/zntKZUy
Below is my code the second URL is the image I want to go up(vertical) whenever I'm resizing the browser.
.desktopbackground {
background: url("wp-content/uploads/2019/02/mobile-Girl-2.0.png") 50px bottom no-repeat,
url("/wp-content/uploads/2019/02/Flower-3.0.png") 100% -10% no-repeat,
url("/wp-content/uploads/2019/02/desktop-Background-1.0.jpg") center no-repeat;
background-attachment: fixed;
background-size:515px,555px,cover;
}
I've tried everything but it keeps going horizontal.
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>
I'm trying to show the full background image as a landing page, then the content appears when the user scrolls down, however the bottom of the background image is usually cut off (depending on browser resolution).
I'm trying:
background-attachment: fixed;
background-size: cover;
Here is a codepen that demonstrates the issues:
https://codepen.io/suez/full/wulBv/
You can see that the bottom of the first image with Iron Man is cut off. Here is the full image (https://i.imgur.com/PbV1Grl.jpg).
Is there a way to show the full height of an image? Even if you need to scroll down more to see it?
use css:
background-size: 100% 100%;
You can add background-position: bottom
https://codepen.io/anon/pen/XMMVYo
It won't show the full height in most cases, but it will show the bottom of the image.
Or you use background-size: contain and (in this particular situation) combine it with a white background color
EDIT: White won't work, I didn't look close enough. Here's approximately what I mean, but it's not really satisfying, since there isn't just one color at the border of the image:
https://codepen.io/anon/pen/zZZpMX
You can use background-size with 100% height and width.
Remove
background-size:cover;
Replace with:
background-size:100% 100%;
i am working on a project in which I have a background image all over the page and over that on the left half of it I have a div in which there is lots of content along with a slider.
The image is of a girl.
background image is in body tag and we cannot move it to another tag.
now the problem is that the background image is cut in half from the left due to that slider content. now we cannot see the girl's face, only her body
I have to move that image towards right so that we could see her face also
i tried to crop the free space from image but that didn't help and we cannot move the slider content.
Image size: 5MB
Resolution: 2710*4072
tried to do margin-right
padding-right
background-position:right
but i can't move that image an inch to right
background-color: #ffffff;
background-image: url('/2014/12/Profile-Background-image.jpg');
background-repeat: no-repeat;
background-position: center right;
background-attachment: fixed;
line-height: 1;
Sample code: http://jsfiddle.net/gmunish/dby4e86j/
Image is not visible so you can add your own image and check
You can specify how far from the right you want the background to be if that is useful.
for example if you wanted the image to be 50px from the right you could use:
background-position: center right 50px;
you could also use a negative value to move it further to the right like so:
background-position: center right -50px;