Set background image for Portrait screen

Question

Issue is with a div which covers 90% of screen and shows a background image. CSS is:

div.invite-bg {
    background-image:url('../img/b1g.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 92em 52em;
    display: compact;
    width: 100%;
    height: 90%;
    position: absolute;
    top: 10%;
    left:0;
}

It's height doesn't work in portrait screen of iPad or iPhone. how can I fix that?

score 1 · Answer 1 · answered Mar 23 '13 at 20:35

1

You use display: compact which makes me think you are getting a situation where the element is displayed as an inline element. Try changing it to display: block;

An element using display: compact may be shown either as an inline or block element depending on the following element.

answered Mar 23 '13 at 20:35

user1823799

120
7

Tried with display:block. No change :( – Himanshu Yadav Mar 23 '13 at 20:40
Ok, it was worth a try. Usually when the height is not giving any effect it's because the element is inline and not block. Can come up with anything else but saw a small mistake on the last line, left:20; is missing a unit after 20. However I don't think that will help much. – user1823799 Mar 23 '13 at 20:48
May i just ask if you are using other display: compact on the page? – user1823799 Mar 23 '13 at 21:16
Yes. but it didn't change anything for me. – Himanshu Yadav Mar 23 '13 at 21:28
Ok, my idea was to set **all** the elements to either block (or inline when that's more suitable) if that is possible since the compact property may be tricky to debug. But if you tested that then it's not the case. Have you looked at the container of this div in this situation? Is it as big as it should be? Since 90% is 90% of it's container, not 90% of the screen size. – user1823799 Mar 23 '13 at 21:42

score 1 · Accepted Answer · edited May 23 '17 at 12:25

1

You can try adjusting the background-size to either cover or contain.

More details can be found here.

edited May 23 '17 at 12:25

Community

1
1

answered Mar 23 '13 at 20:42

bukka

4,973
3
19
21

background-size: cover gave better result but still few pixels of height is remaining. – Himanshu Yadav Mar 23 '13 at 20:50
Are you sure it is not because the `height` is set to `90%` and `top` to `10%` – bukka Mar 23 '13 at 20:53
I have a navigation bar on top and below is this div. top:10% is there to fit image in rest of the screen else it was overlapping with navigation bar's background. – Himanshu Yadav Mar 23 '13 at 20:56
So you are lacking height on the bottom? Also you tried setting the height to 100%? And if possible can you supply us with a screen-shot, or provide us with some more information such as the size of the actual image. I can't figure out what the issue is based on just these few things. – bukka Mar 23 '13 at 21:07
Sorry, sharing a screenshot will not be possible. I appreciate your help. – Himanshu Yadav Mar 23 '13 at 21:30

Set background image for Portrait screen

2 Answers2