Hi
I did post this in the old forum and Norm gave a solution, but I was wondering how to set three different blocs using desktop, tablet and mobile view using the same image but it fits and scales properly, I am not sure how to do this, do I keep the desktop one intact, then go to tablet view and delete the bloc and add a new bloc with the same image and then the same with mobile view, slightly confused here.
Cheers
Chris
In the last Forum Pauland said he uses another block
I do this by having different blocs for different devices. Then you can use different images that suit the appropriate resolution. So one block is visible only on tablet and desktop, and the other block only visible on mobile.
But how does one achieve this ? sorry I am just learning this program and I can find any tutorials on it.
Regards
Chris
Norm explained a way to do it with classes here I copied his instructions for you.
(http://support.blocsapp.com/forums/topic/background-image-to-resize/)
If all you want is a background image changed, this is super simple with classes.
• Set the desktop background image using the sidebar.
• With the bloc selected add a custom class my-bloc or whatever you like.
• Switch to tablet view
• Click on the my-bloc class tag in the class field
• Click the paint brush icon in the class editor
• Click the empty thumbnail box to left of the image label and add your tablet artwork, close class editor.
• Switch to Mobile view
• Click on the my-bloc class tag in the class field
• Click the paint brush icon
• Click the empty thumbnail box to left of the image label and add your mobile artwork, close class editor.
All done, you now have 3 background images set for all 3 breakpoints, you can also tweak positioning etc. I recommend images that are more square for mobile devices.
Cheers All
Hi Norm
Would size images would you recommend for the same background image on screen,ipad and mobile ? is there any particular resolution, I am having difficulty getting the right size for each screen.
Cheers
Chris
@Chris thats a good question, that unfortunately doesn’t have a definitive answer as there are a vast array of different tablets and mobile phone screen sizes to take into consideration. I always aim for Apple devices, so get the specs of apple device screens (pixel height,width) and work from there, ultimately when it comes to background images you will most likely need to make some compromises along the way.
Okay Norm cheers, Just wanted to use the same band picture for the screen,tablet and mobile but appear all the same without cutting off bits of the image,just cant seem to figure it out.
Thanks
Chris
Found this link that gives you some good information on device screen size and dpi along with some other useful info.
Cheers se7en, this is what I am trying to achieve using the same image, but my brain is mush,just need a tut on how to get it to look this way.
Cheers
Chris
I only need to get one image to look the same in screen - tablet - phone, I have messed around with custom classes but I am obviously buggering something up, I dont need thousands of breakpoints for all devices in the world,perhaps my wording has been wrong, dont know but if someone has achieved this like the image above, please instruct, I will buy you a virtual pint 
Im going to give you the power to add them yourself 
Guess its not possible then OH 
Careful with that approach however, as the array is vastly and largely non-Apple. 
Has anybody made a website like the image I showed,I know it is possible to have one image fit on all devices,but I am damned if I know how to implement it,I have tried all sorts and it is really pissing me off,any help would be really appreacited.
Cheers
Chris
@se7en well I have a image of a band that I would like to add in a block under the navigation,I have chosen a block from the structure menu that has a row I can place a logo in,the band image will be on the background of the structure block and I would like to see it appear exactly the same in tablet and mobile view,at the moment I am on my phone so I can’t look at it in my computer,I bought this app as the person I am doing the site for also bought this app but is struggling to get his head around it, It looks fine in tablet and mobile view but screen view is cut off so I have to add padding to the screen image,this in turn makes the tablet and mobile view expand also,I have made custom classes but I am missing a simple thing and all I need is what to do to get the image to appear in all three modes,so for example the image you posted above,how would I achieve to get that image to fit in screen - tablet - mobile view,I hope this helps ?
to get what i got i put the first bloc under the struture tab in the global area, look at appearance on the block info for padding i have none-0px , width edge to edge, and no background image.
now i click my single element bloc tool near the top next to the arrow on the right of the screen.
has a square with a cross sign in it from that i chose the image element and place it in the global bloc over the one above.
make sure your picture is big enough to cover the entire width of the biggest screen you want it on i use single resolution because i dont have a retina screen. appearance alignment center. change nothing else but make a custom class for that img name it what you want.
in the custom class section make the width dimension 100 %. thats it i am sure there is other ways but thats how i got it to stay center and stretch full width and shrink while staying the same ratio on whatever you veiw it on.
only problem is i am having no luck putting anything on top of the image . maybe someone has a idea here i will look though some websites people have posted and find somehing similar and make some inquiries
@se7en Cheers Tim, I will give this a shot, looks like I may have to use some coding to get it to flow better, thank you for your help mate 
