The offending website: http://www.jasonmfry.com. The corresponding codepen: https://codepen.io/Auslegung/pen/Roapwv.
Scroll down until you can see a half inch of the image at the top of your screen, and you will notice another half inch of white above that. I want the images to fill the container and not leave that white space above themselves. I have tested this on the latest Chrome and Safari builds on Mac. On iPhone Chrome and Safari there is no white space, fwiw.
Removing line 88 of styles.css background-repeat: no-repeat fills that white space with the bottom of the image, but of course I don't want that. Reducing the scale value on line 94 transform: translateZ(1px) scale(1.08) will reduce the amount of white space shown, but at the expense of the parallax scrolling effect. How can I get the images to fill up that entire area, while still exhibiting parallax scrolling?
I've done a lot of googling and experimenting and haven't been able to figure anything out. Let me know if I'm missing any info that you need to help me out. I'm also having issues with image ratio during browser resize but that's another question altogether.
I used to be a WDI instructor, and actually probably would have taught your particular online class but left to go work on other things. Kudos on using StackOverflow! Say hi to Marc, Matt, and whoever else is around. :)
The issue here is that by default scale resizes things relative to the center of the element. You want it to center things relative to the bottom of the element.
Putting it another way: think of scale as sending out little arms to the edges of your image to pull in the edges. By default, the arms reach out from the center of your image and pull in all its edges equally. You want them to reach out out from the top of your image and "pull" up the bottom edge.
TLDR, just add this line: transform-origin:bottom;!
Edit:
The issue here is actually with the dimensions of the images themselves.
As long as the ratio of the window's height/width is greater than the image's height/width you won't have any issues, but once the window's ratio is smaller than the image's ratio you'll see that whitespace.
Your headshot is almost square, whereas the other images are very rectangular. If your browser window is wider than it is tall the headshot will behave, but resize the window to be taller than it is wide and you see the whitespace again. Conversely, make the window much shorter than it is wide and all the images will behave themselves.
You could resize all the images to be narrow and tall. The largest aspect ratio on devices is 16:9, so make the images <9x wide and >16x tall and you should be good.
Unfortunately I don't think there's slicker solution for this other than using Javascript.
Related
I'm using a 3x3 image grid with Lightbox (in MDBootstrap).
The images all have a 33% width (including padding).
All images are retrieved from the Instagram Basic Display API.
These images usually have a native resolution of 1440x1440px.
However, sometimes, for some odd reason, an image will have a resolution of 1440x1441 (one pixel wider).
Putting these images that are one pixel higher in a grid, scaling them down to 33% width, will cause them to be slightly larger, which thereby causes 3 images to no longer fit on one row. Please see example below:
As you can see, the images aren't aligned in a 3x3 grid. I found out that this is caused by the second image in the top row, which is actually 156 in width by 156.094px in height(!). This is obviously caused by the image provided by Instagram being 1440x1441 (in stead of 1440x1440):
I have tried using display: inline-table on the image object as someone in another topic suggested (to round down decimal pixels), but this didn't work. Manually resizing the image to 155.891px x 156px (using Inspect Element in Chrome) makes the image fit:
So my question is: without having to check every image's width with javascript and resizing all of them to the same height, how can I make sure the image has an exact 1:1 aspect ratio as opposed to ~1:1.001 to prevent this from happening?
Any help would be greatly appreciated!
EDIT: fixed switching height/width around, thanks #CBroe
I've got a viewport fixed in size (blue rectangle in illustration). Within this viewport I've got my content. Whenever the content is greater in size than the surrounding viewport, I want to be able to scroll. This so far works just fine.
The problem I'm experiencing comes into play as soon as I transform my content. Let's say I want to scale and translate it in order to show a certain area in higher detail.
After this transformation I still want to be able to reach every corner of my content with the scrollbars of the viewport (green in illustration). But I can only croll right and down. Everything above and left of my translation can't be reached with the scrollbars.
Is this just how things are, or am I missing something? Is there a good solution to this?
Dear Overflowing Stackers,
My page is proving to be a real pain the behind. I was experiencing this problem:
background is only as wide as viewport
and I tried to remedy it by putting a min-width on the body. That works just fine; everything displays properly, but only if my min-width has a value high enough to encompass my #navwrapper div (it's the one with the green swirly vector art background).
With such a high value (1265px) many users will be given a horizontal scrollbar, which I don't want. I have a really wide skyline image in the footer (3,000px) and it doesn't cause a scrollbar, so I'm wondering why my navwrapper does. Ideally, I want the page to have a min-width of 960px, so the navwrapper will stay centered, and the edges will get clipped if the edges extend past the viewport.
An early version of my page is here: http://jezenthomas.co.uk/poison2/
Hope someone can figure it out!
Your navwrapper has content in it. Your skyline is just a background image. Browsers treat content with priority and allow backgrounds to just fall outside of the viewport. If you want to prevent scrollbars, you can add
body {
overflow-x:hidden;
}
which will hide any horizontal scrollbars.
I'm working on a project for an Artist, the project has been passed to me as the design has been completed. I have receieved the design in a .psd file and the size is huuuuuuuge 2504px x 1781px to be exact!
As there are lots of patterns and gradients on it, I'm a little unsure as to how to set the image up. I have put the image up online, I think the first pressing thing is to resize it to suit more modern screen sizes.
The image is attached, Any help or suggestions on how to manage the image are much appreciated.
Cheers
That´s not a very flexible design for different aspect ratios, stretching it on a wide-screen monitor will not look pretty.
I would probably make multiple versions of the image (different sizes) and use html5 and / or javascript techniques to serve the right image to the visitor.
I would not use it as a background image but put it in a div behind the rest of the content so that I can scale that div and the image to be 100% wide. Positioning it in the bottom-left corner should make the most important part (the frame) always well visible.
I hope for you that mobile browsers in a vertical position are not a requirement...
you can split ('old style' way) the image in parts (in a glace, a header, a right column, a footer) and use'em as background images for divs. I suggest using photoshop built-in funcions "save for websites" to optimize the image (as Jpeg) to get the best ratio 'small file - best appearance' (something like medium (50 or 60) quality, multiple passage otpimization and a 1000 px width).
This if you want to keep the fixed layout..
What resolution is the website designed for?
I found that resizing the image to 1280px width (911px height) works nicely for a browser window size of 1024x768, which is pretty much the minimum that anybody's going to be using these days.
With this CSS:
body {
background-image: url('/path/to/your/background.png');
background-position: left bottom;
background-attachment: fixed;
background-repeat: no-repeat;
background-color: #000000;
}
.. the main part of the picture (people holding the frame) will always be in view, and larger browser viewports will get more of the top and right portions of the picture.
However: Anybody with a browser with above 1280px will see the plain black background color.
Edit: There's also the CSS3 property background-size: 100%;, which will automatically shrink/stretch the image to fit the browser viewport.
Update: I found that PNG-8 gave me the best quality-vs-filesize for the resolution I mentioned above. It came in at 280KB, whereas a comparable quality JPG was in the 330KB range.
Consider using a fixed size layout with the same aspect ratio as the image and resize the image to the same dimensions as the layout. You can then either set the background colour to the same black as the image or a complementary colour.
A layout of around 1000px * 700px works well on most computer displays.
If you must have a flexible layout then it would be really nice if you could separate the components of the image (do you have all the layers?). ie the frame/people, the red floral designs of the corners, and the background with crossed bands.
Then use several divs and some javascript so that the frame and hands stays locked in position relative to the bottom left corner, the floral designs always gravitate towards the four corners and the background moves so as to keep the frame in the dark diagonal area; kind of sliding up and to the right along the red band. (I can see it in my minds eye bt it's hard to describe.)
I have this website.
The div container contains a background with a grungy look, and the body contains another background that is repeated on the x coordinate.
If you view the site you'll see whitespace on the left and right side. I am wondering how I can set the background images to expand based on the screen resolution. Would it work to set a width based on percentage for each div?
To my knowledge, CSS does not support scaling background images, which is disappointing to say the least. Long story short, you'll probably have to fake it with a fixed-position, z-indexed img tag. That, or what you did: a large image with a background-repeat.
I dont see any issues with what you've got in FF3/IE6/IE7 and chrome. only issue i see is the transparent png in ie6 with the ugly gray behind it.
ie6 I gotta fix but what the customer wants is for the with of the page to size up based on the users computer resolution
Unfortunately, you can't scale the image itself.
What you could do would be remake the div structure so that the inner div contains the center of the grungy background and the sides were tiled through two separate divs. You could then recut the center piece to tile both vertically and horizontally and give it a width that is a percentage of the window size. You could keep it from getting too small via javascript.
This is not an optimal solution, but if the client is set on having it scale with the browser window, this might accomplish it for them.
thanks for all your answers, when i said white space i didnt mean actual white space what i was refering to was that the entire container div wasnt sizing (width wise) towards what the users computer resolution was. and since allot of the divs are set with a background image there is no css code for setting the width on the image but i guess it would work on the divs. but thankfully after talking with the customer he changed his mind and doesnt want it anymore :)