Swap background image depending on div height

Question

I have a div (content area) with an image background, now if the div height extends to more than 600px I would like to display a different background image. Is that possible with just CSS?

If your div height is tied to the page height (i.e. 60% of body) then you can use media queries. No other widely supported solutions come to mind. — Riccardo Zorn, Apr 08 '14 at 09:09
Take a look at this post on SO: http://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-the-screen — Cem Özer, Apr 08 '14 at 09:12
I don't think it is possible with CSS however it is certainly possible with Javascript or jQuery — Mudassir, Apr 08 '14 at 09:16

score 3 · Answer 1 · answered Apr 08 '14 at 09:22

Simple answer: No.

More complex answer: It depends. For example you could set the height of the div-container relative to the height of the viewport and resize that. At some point the div will grow to a height > 600px. You could then watch out for the height of the viewport and base a media-query on the value.

@media (min-height: viewport-height when div is 601px high)
  your styles {}
}

If that solution is not what you are looking for, then you have the option of looking for the height of the div with JavaScript and thereby swap the background image.

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

here is an example i am giving, try changing the height of the result window to see the change:

.facet_sidebar{
    background: url('http://www.hexaware.com/brandresourcecenter/images/images_compass.png');
    height: 100px;
    width: 100px;
}


@media (max-height: 600px) {
  .facet_sidebar {
      background: url('http://www.hexaware.com/brandresourcecenter/images/images_gears.png');
    width: 100px;
  }
}

jsfiddle demo

Media queries can be used to change anything.

Hope it helps

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 08 '14 at 09:22

aelor

10,892
3
32
48

Yes media queries can be used to change anything, but it unable to work "based on" anything. It works based on device, media-type, etc... but not html elements. Question asks for responsiveness based on element height. Your example works when changing viewport height, not div's height. – Cem Özer Apr 08 '14 at 17:25

score 0 · Answer 3 · answered Apr 08 '14 at 09:15

0

yes it is possible through the media inquiry

@media screen and (max-device-width: 768px) {
    .div {
            width: 960px;
        background: url(...);
    }
}

answered Apr 08 '14 at 09:15

AlexPrinceton

1,173
9
12

or simply device-width – AlexPrinceton Apr 08 '14 at 09:19

Swap background image depending on div height

3 Answers3