How to make image disappear with a smaller page size?

Question

I am working on a design for a website and when you decrease the size of the page I want a specific image in the footer to disappear.

Is this even possible?

Answer 1

It's not only possible, but fairly simple with media queries:

@media screen and (max-width: 600px) {

    .myImageClass {display:none;}

}

Answer 2

Yes, it is easily doable. I suggest you use CSS media queries to get the job done.

/* Normal CSS rules (always applies) */
#footer { display: none; }

/* Media query rules to override previous rules, as necessary */
@media screen and (min-width: 800px) { 
   #footer { display: block; } 
}

Answer 3

This can be done either with CSS Media Queries or using Javascript. SmashingMagazine has a good article that can help you get started: http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/