Welcome, Guest
Username: Password: Remember me
Use this Category for your support questions about Responsive Joomla Virtuemart Template - CoolMart (SKU# FLEX-00014)

TOPIC: Backgrounds for different screen sizes

Backgrounds for different screen sizes 10 years 2 weeks ago #9061

Hi, I am aware you do not support custom questions, and if this goes unanswered then I cannot complain. The template is absolutely fantastic but I need a background image. Hopefully someone else will read this and have the ability to add a background image easily too. I use firefox, and have made all the other alterations I needed except this one :(

I have added a style for the "bg-background-gradient" which already exists in the template but does not have any style currently set. I needed a background image, and as such I have succesfully used the following css in custom.css to make this happen:
.bg-background-gradient { background: url("your-background-here.jpg") no-repeat fixed center center #FFFFFF; }
I then had to add a white color to the grid block so the content and modules still appear on a white background:
.grid-block { background-color: #FFFFFF; }
Is there a way of using a different (or actually NO background) for smaller screen sizes other than the full screen?
i.e. If fullscreen background = jpg else background= #FFFFFF (you know what I mean)

Thanks for taking the time to read this.
Last Edit: 10 years 2 weeks ago by Aaron W.
The topic has been locked.

Backgrounds for different screen sizes 10 years 1 week ago #9075

Hi,

The css3 media queries is exactly what you are looking for.

Read this article:
webdesignerwall.com/tutorials/css3-media-queries

You can use this:
.bg-background-gradient { background: #000;}
 
@media screen and (max-width: 600px) {
  .bg-background-gradient {
    background: #fff;
  }
}
 

The above CSS rule means; if the screen resolution is higher than 600, the background will be: #000
If the screen resolution drops below 600, the background will become: #fff;

by following this idea, you can create your own css3 media queries to define different CSS rules for different screen resolutions.

Regards,
Support
Last Edit: 10 years 1 week ago by Support.
The topic has been locked.

Backgrounds for different screen sizes 10 years 1 week ago #9125

Thank you very much for your answer, exactly what I needed. I hope someone else can use this too
The topic has been locked.

Backgrounds for different screen sizes 10 years 1 week ago #9143

Hi,

thanks for updating your own topic and my suggestion is what you are looking for.

case solved. Topic closed.

If you like CoolMart and satisfied with the support you have received, please "write a review" on:
www.flexiblewebdesign.com/Joomla-Virtuemart-Templates/CoolMart

Rate CoolMart and write a couple of sentences to share your experience with the support team.
It won't take more than 2 minutes from you but it is extremely important for us.

Thanks in advance!

Regards,
Support
The topic has been locked.
Time to create page: 0.079 seconds

MaterialMart

for Virtuemart 3

Google's Material Design has finally arrived to Virtuemart

Virtumart Template - MaterialMart Virtumart Template - CleanMart Virtumart Template - CleanMart Virtumart Template - CleanMart

Fully responsive!

Buy Now   |   Live Demo