Crop Image To Center on Screen Resize with CSS - css

I'm trying to take an image and center it on the screen. Lets say the image is the full width of your screen, say 1400px ---
When you resize the browser window, I'm trying to get the image to crop but stay centered as the browser window gets smaller.
Is this possible with css?
I tried a few things with overflow:hidden - no success.

I would take a look at background-size and then just center it vertically and horizontally.
http://css-tricks.com/perfect-full-page-background-image/

Related

CSS table with center align and max-height

I want to show an image centered in window (horizontally & vertically). If the image is too large, I want to scale it down to fit (no scrollbars).
Here is a live demo - try resizing the window. The image scales to fit but is not vertically centered.
I am trying to use CSS table/table-cell, but this breaks max-height set on the image. If you uncomment the table/table-cell, the image will extend beyond bottom of window.
Is it possible to have both? I've found similar questions but not this exact setup.
I used vh and vw to capture the viewport dimensions. Is this sort of what you want?

Hot spot over responsive image

I have to set some hotspots over a reponsive image.
The indispensable requirement is that after a certain height the background image
will be "cropped" on top (using: background-position: 0 bottom).
In this example hotspots are ok until the image width is less than window width.
How can I preserve the correct positioning?
CodePen

CSS background image on 100% div width

![this is the way it should look like][1]
I have no idea how to write CSS for the image that need to be in bcg or div, that will be aligned with right side of content and header. This image has to go from right side of content to left side of browser window.
Lets say browser window is 1900px wide and content is 1100px center aligned.
Image is aligned with the right side of browser window.
I want to write it the way when you change width of browser window, image needs to stay right aligned and left part need to 'disappear' like when you do that with background image and change size of div.
No stretching of the image is aloud, as well as no horizontal scroll.
It need to look like this http://city.tolteam.com/2.html - site will look like this http://city.tolteam.com/ac.jpg
Any help is appreciated. Thx.
Use
float:right; width:50%; /* or a fixed width if you dont want the image to shrink or stretch */
Say like
float:right; width:400px; /* The actual image width */
Which would keep constant size all the time irregular of browser resizes.

Unable to get a proper background image in an panel inside a fullscreen scrollview in GWT

I'm having trouble with setting the main background image for a page.
I've got a full screen scrollview, in which I have a centered ~1000px wide flowpanel. The issue is that I want the flowpanel to have a background image that goes from the top of the screen to the bottom, even when the flowpanel is half-empty, and when the flowpanel extends below the screen - just like any normal website.
If you set the height of the flowpanel at pageload/resize to the height of the screen it works properly until the flowpanel expands to become bigger than the screen - at which point the background image stops at the original set height, as if the background image itself is not resizing along with the flowpanel.
If I don't initially resize the flowpanel it expands fine, but you don't have any background image below the height of the flowpanel until it fills the screen.
I can't put the background image in the scrollpanel itself, because when the scrollbars appear the inner flowpanel is shifted to the left by the width of the scrollbar, which mis-aligns it's contents with the background image.
This must be a very common approach to building a page, so there must be some solution that I'm missing. The app is aimed at IE6 if that helps.
I think I might have fixed it - I've now set a min-height + ie6 min-height on the panel depending on the window size, which then refreshes with a window size change. Seems to be working properly.

SVG as Oversized Website Background

I want to build a fixed width website which is 960px wide and aligned to the left. However, I want to use a background which is wider than 960px and that fills the space to the right if the user has a screen wider than 960px.
This is easy using a background image:
body {background:url(myreallywidebgimage.png) 0 0 no-repeat}
#wrapper {width:960px;}
But can I do it where the background is an SVG, without a horizontal scroll bar appearing?
The only thing I can think of that would turn off the horizontal scrollbar is to do something like as follows:
#wrapper {width:960px; overflow-x:hidden}
Edit: Upon further reflection I decided it was best to see if Google offered up an other possible suggestions and I came across this: http://helephant.com/2009/08/svg-images-as-css-backgrounds/. The above solution will only work if you assign the background to that div element. You can, however try assigning overflow-x:hidden to the body itself to see if that solves the problem as well. Hopefully these suggestions help.
The background will scroll only if your SVG image has pixel dimensions which exceeds that of the browser window. If you set the image to have 100% width and 100% height, the background should not scroll.
Take a look at this web site. They're essentially doing what you want. They have an SVG gradient as the background. As you resize the browser, the gradient adjusts to fill the entire window.
http://emacsformacosx.com/
They also have a lot of other SVG on the page, but the background gradient is all you need.

Resources