I'm working with images that have been aligned with rule-of-thirds on the focus of the image, and background-image to put the image in the page.
When a user is on a tablet (or bigger) device, I'm using background-position:50%; which is fine; I don't mind that the picture is aligned off to the side.
However, on mobile devices, I would like the subject (which is on the right rule-of-third line -- see my JSBin for an example) to be horizontally centered on the screen. I know that I can use different percentages, such as background-position:75% 50% to get it close, but as the width of the device changes the 75% is no longer "center".
Is there a way, without writing a hundred different media queries so that it's always centered, to have background-position be dynamic enough to always center an image on mobile?
Here's a JSBin of what I'm looking at.
Some assumptions:
Pictures will always be aligned on rule-of-thirds
Pictures will always have the same physical dimension
Work in IE9+
Not worried about vertical alignment
For smaller than 768px try:
background-position: -50vw;
And you may have to set the background size to 150% instead of cover for this case.
Related
http://www.otislandscapeassociates.com/about/
I am experimenting with a banner ( the landscape image of twigs), but i am having difficulties in making it responsive across devices, e.g desktop, tablet, mobile without the image being stretched or not fitting correctly or being cut off at either end.
Would like some advice on how to get around this, also if i need to adjust the dimensions of the actually image, is it to big? Should it be smaller? etc.
I am currently doing everything in css, so this is my preferred method of modification.
Thanks in advance.
You can try
background-size: contain;
its the easiest way to make a background image to be responsive.
But note as the width adjusts with the screen width, it will also make the image proportionally reduce in height.
I can see you have a fixed height and already use
background-size: cover;
which is what i'll normally recommended if you want it auto fill the container irrespective of the size of the container.
You cant have both (not stretched & always fill irrespective of the size of container). Looking at the image ( the white space that blends with the page & assuming its a must use) i suggest you add this to the class so it remains responsive but always fixes the design at the bottom of the div so it can always blend into the white above. Let me know if you need any clarification or questions
background-position: center 100%;
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.
I'm developing a wordpress theme and I'm having a bit of a problem.
In my homepage I want a wide background image with some text centered on it. So far pretty standard.
The thing is, I want the height to stay the same and as the browser gets smaller, the image should crop from both sides accordingly so the image stay centered.
Here is a great example I found, try resizing it and look at the big image at the top:
http://www.shopstyle.com/
How can I get this effect?
Thanks in advance! :)
You can use property background-size with value cover, which was made for that purpose
cover
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.
set the height you need (you can set different height for FHD, HD, Tablet, Mobile with media queries) and the image will be cropped from sides and zoomed if needed (if it's shorter than height you set)
Additionally to using background-size: cover;
You should use view port height to control the height of the image. This way it will always be a certain percentage of the view port height, no matter if it's a desktop, laptop, phone, etc. It's the more fluid way to display a height.
Example (covers the whole screen):
.yourelement {
height: 100vh;
}
Example (covers half the screen):
.yourelement {
height: 50vh;
}
Adjust accordingly.
I'm building a website with a 960px design, but the designer has also requested that the page have a full-width background photo across it. He has supplied a 2000px image for this.
However, trickily, part of the photo is integral to the navigation of the page, so the image needs to be centred. So I want the left and right edges to overflow out of the viewport. I've tried to do this using CSS, but have failed.
I could do a javascript version to adjust the left margin based on the viewport when the document loads and the window is adjusted, but I expect it may perform badly, particularly on the adjustment. A lot of the target audience of the site have some serious legacy hardware, so will be using slow computers running IE6. Is there a good CSS way of doing this which would perform better?
UPDATE: Sorry, I wasn't very clear in terms of the "full-width" thing. The content of the site is all restricted to a 960px column, except this particular image, which should be the full-width of the browser window, even if it is greater than 960px. Using background-position is the method which I've already tried, but if I size the particular div to 2000px wide, then I haven't been able to center the div, whereas if I set it to 100% the background-position:center doesn't seem to work
One way you could do this is with background-position: center top;, put the 2000px image as a background to a 960px div like this:
DEMO
As far as I'm aware this is supported on IE6+
Just use background positioning.
body {
background: url(blah.jpg) center top no-repeat;
}
Try something like this on the image:
position: absolute;
left:50%;
margin-left:-1000px; /* half the width of the image */
However, if part of the image is going to be used for navigation, and it has a fixed 2000px width, i see a lot of tears in your future.
Consider dividing the image into layers that can be manipulated individually.
EDIT: As mentioned by Michael this approach is not good.
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.)