CODEWITHSUNDEEP
htmlcss
SupremeNoob
SupremeNoob

Reputation: 23

What is wrong with my css media query?

I'm playing around with some basic media queries. I'm not sure what is wrong but the image doesn't show up in the div (id="image"), no matter what I do with it. I am currently only testing this on Chrome and other desktop browsers. Thanks in advance for your feedback!

I have a div with the following CSS:

html:

<div id="image"></div>

css:

#image {
    background: url(300x250_A.jpg); 
}

@media screen and (min-width:300px) {
    #image { 
        background: url(300x250_A.jpg); 
    }
}

Upvotes: 2

Views: 66

Answers (4)

Tushar Dhingra
Tushar Dhingra

Reputation: 27

Please check this

@media (min-width: 300px) {
#page {
background: url('nextpage.png') repeat-x;
}}
@media (max-width: 600px) {
#page { background: url('nextpage2.png') repeat-x;
}
}

Upvotes: 0

The F
The F

Reputation: 3714

Simply give #image a height: 

#image { 
    height: 250px; 
    width: auto;
    background: url('300x250_A.jpg');
}

This can seem confusing, but think about it like this: as your #image is empty it has no dimensions, even though you gave it a background via css.

Just for good measure, it is nice to wrap the path to your image inside single quotes #image { background: url('path/to/image.jpg') ... }

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Your <div> is currently empty. You need to set the height in order to show up. See the difference between with height and without height.

.with-height {height: 100px;}

#image { 
  background: url(http://lorempixel.com/640/480/); 
}

@media screen and (min-width:300px) {
  #image { 
    background: url(http://lorempixel.com/640/480/); 
  }
}
Can you see the image below?
<div id="image"></div>
Can you see the image above?

<hr />

Can you see the image below?
<div id="image" class="with-height"></div>
Can you see the image above?

Preview

Upvotes: 1

Daniel
Daniel

Reputation: 3514

You need to give your div dimensions or add some content (a &nbsp; as space will be sufficient). Otherwise your div will not be rendered.

<div id="image">
    &nbsp;
</div>

See this fiddle as example.

Upvotes: 3

Related Questions