Landscape&Portrait mode different backgrounds issue

HTML & CSS
1

Good morning,
I’m learning css+html since jan.2018 so i’m a beginner in code, my problem is that i’m trying to use two different type of pictures (dimensions) for landscape and portrait using media query… doesn’t work really well :

@media screen and (orientation:portrait) {
.index {
    background-image: url(../img/facade_portrait.jpg);
    background-repeat: no-repeat;
    background-size: 1433px;
    background-position: initial; 
}
}


@media screen and (orientation:landscape) {
.index {
    background-image: url(../img/facade_paysage.jpg);
    background-repeat: no-repeat;
    background-size: 1433px;
    background-position: initial; 
}
}

Actually, only my landscape image works… and it’s not even logic, they’re the same
(.index is the name of my body 'cause i have multiple html docs)

2

Do you have a link to the page in question as it will be easier to debug?

You have background-size:1433px in both queries. How can that be correct?

In most cases you don’t need to know about orientation anyway as it’s really only the width available you need to care about.

Also 1433px is a fixed width that doesnt play well in a responsive design and of course only works for a screen width of 1433px which is a very limited audience indeed.

I must admit that I have never found a need to use the orientation media query in the hundreds of sites I’ve worked on over the last ten years. I know there are use cases for specific devices but even then a simpler approach is usually better.

If you can expand on why you need this orientation media query and perhaps provide a demo we can offer more specific help:)

1 Like
3

I don’t think that is correct either. :wonky:

Source :-

https://www.w3.org/wiki/CSS/Properties/background-position

coothead

4

It’s a global keyword that sets a property to its default value.
In this case it may not be resetting anything, so that would be the same as not even declaring it.

background-position
initial

3 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.