Jump to content

Archived

This topic is now archived and is closed to further replies.

robertph

Make Background Image Disappear in Responsive Design

Recommended Posts

robertph

Hello,

 

I have a site where I'm using a custom CSS class for a section area, however I want the background image to disappear when the responsive layout goes into a smaller width screen. How can I do this in the Custom CSS? 

 

Thanks for any assistance.

 

Just for reference, my CSS for the background image:

 

.content-bg {
  background-image: url('site_images/content-bg.gif');
  background-position: center;
  background-repeat: repeat-y;
}

Share this post


Link to post
Share on other sites
Danny

Hi,

 

What you can do is either add your section to the Full Width Section Area section and in the sections options add the following class to the Styling Classes field.

 

hidden-phone

 

Or use Media Queries by targetting the sections class or giving it a custom class and targetting that using media queries. For more info on Media Queries, see the following:

 

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

 

You can use my reply here as a base for your own CSS - http://forum.pagelines.com/topic/30582-how-to-override-media-queries-in-dms-pro/?p=181120


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
robertph

Thanks, a lot easier than I thought. I ended up doing this since I still need the section to be there, just not the background:

@media (min-width: 767px) {
  #page .content-bg {
    background-image: url('site_images/content-bg.gif');
    background-position: center;
    background-repeat: repeat-y;
  }
}

Seems to work great!

 

Thanks

Share this post


Link to post
Share on other sites
Danny
No problem.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Fiskaz

Hi Danny,

 

Is it possible to apply on text box and header section by adding class.

Share this post


Link to post
Share on other sites
Danny

That CSS isn't really required any more. If you have the DMS Pro Tools plugin active, it adds hide options to all sections.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×