Constraint Overlay to Image Height?

Question

I'm having difficulty in constraining a transparent overlay & text to the height of a background image. I tried media queries to detect portrait/landscape modes but it doesn't work well when there is a large amount of text to display.

How can I constraint the height of the transparent overlay & the text to the height of the native image (even as it's resized) while still allowing the overlay & text to be scrollable within the image height?

Here's my attempt with media queries to detect orientation. It works well except when there is a large amount of text: http://jsfiddle.net/9ky7xfmd/1/

body {
    background-image: url("http://www.gracotechgrupa.hr/img/site/header_homes/icon/zastita-metalnih-dijelova.jpg");
    background-color: black;
    width: 100%;
    height: auto;
    display: block;
    background-repeat:no-repeat;
    overflow-y: auto;
    overflow-x: hidden;
} 

@media all and (orientation:portrait) {
                /* Styles for Portrait screen */
                .headline {
                    display: block;
                    color: blue;
                    -webkit-box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77);
                    -moz-box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77);
                    box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77);
                    background: rgba(255,255,255,0.73);
                    padding-top: 0.7%;
                    padding-bottom: 1%;
                    padding-left: 3%;
                    padding-right: 3%;
                    height: 20%;
                    position: absolute;
                    margin-left: 25%;
                    margin-right: 25%;
                    top: 12.5%;
                    max-width: 45%;
                    font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
                    font-size: 2.25vmin; /* This was originally 1.33vw & 1.718vmin  */
                    opacity:1;
                    z-index: 2;
                }
            }
            @media all and (orientation:landscape) {
                /* Styles for Landscape screen */
                .headline {
                    display: block;
                    color: blue;
                    -webkit-box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77);
                    -moz-box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77);
                    box-shadow: inset 0px 0px 300px 28px rgba(255,255,255,0.77);
                    background: rgba(255,255,255,0.73);
                    padding-top: 0.7%;
                    padding-bottom: 1%;
                    padding-left: 3%;
                    padding-right: 3%;
                    height: auto;
                    position: absolute;
                    margin-left: 25%;
                    margin-right: 25%;
                    top: 12.5%;
                    max-width: 45%;
                    font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
                    font-size: 2.25vmin; /* This was originally 1.33vw & 1.718vmin  */
                    opacity:1;
                    z-index: 2;
                }
            }

*The reason I'm trying to do this is because mobile devices resize landscape images to about half of the screen size. I'm trying to force a landscape view in all orientations. — Fr33, Oct 16 '15 at 16:44

score 0 · Accepted Answer · answered Oct 16 '15 at 18:05

0

You should use overflow(-x/-y) scroll :)

Devlen

answered Oct 16 '15 at 18:05

Tarik Weiss

336
2
15

Sorry for the late reply, I've been trying to test it out. It works great! But it causes the scrollbar to show in the overlay making it look weird. Thanks for the reply! I'll now have to figure out how to handle the scrollbar lol... – Fr33 Oct 16 '15 at 20:12
Sry for the late awnser ^^ but you could style the scrolling ui! http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div that's a post with nice explanations ^^ – Tarik Weiss Oct 19 '15 at 15:09

Constraint Overlay to Image Height?

1 Answers1