Website question: Is this layout trick possible?
January 6, 2014 3:45 PM Subscribe
Silly question about CSS3 background images that change size to "cover" shifting dimensions. If you have an image that changes size while snipping off the sides to cover an area, is there a good way to predict its "cover" behavior, so that a piece of HTML text can follow right along with it, so as to fit over a certain spot on the image?
posted by steinsaltz to Computers & Internet (4 answers total) 3 users marked this as a favorite
I have a design based on a full-screen, hi-resolution image. Using the helpful "background-size: cover" trick, the image adjusts to fit any window size. So far so good...
The trouble is that I need a piece of text to fit over a particular spot in that image. For example, let's say it is a picture of a drive-in theater, and the HTML element needs to show up directly over the screen. But mere percentages do not seem to do the trick because of how "cover" will crop the sides of the picture as needed. I tried using responsive queries based on width, but this has been really clunky and has required entering lots of position: left numbers.
In an ideal situation, there would be some way to tag that spot, that screen, and make the dynamically-generated text show up right over it wherever it goes. But I can't think of a way to do it and I wonder if anyone on Metafilter might have a good solution. I know I've seen something similar accomplished on a website somewhere. Any help much appreciated.