I tried to find an answer for this in the forum so I am sorry if it has already been addressed. I often design for a niche group that still wants a very graphic heavy collage style header. They do not want just a nice background image with text hovering over the top which works so well with responsive design.
Is there a way to do one or both of the following?
Change the focus of the static header graphic per resolution or viewport. In other words in tablet or mobile view move the focus to show just one portion of the header leaving the rest out of frame while having the content follow below with standard grid behavior. I remember sites that behaved this way in the past.
Have a different header entirely for each resolution.
I prefer 1. but will be more than happy with 2. I just need a solution that does not involve just changing the size of the original image.
For #2, you can just make 4 different Headers and for each one go onto the Settings of each and choose the devices you want it visible on. Hope this helps, ask me if you have any further questions.
Can you post some screenshots your your site link so we can get a better idea of what you mean? If you mean simply zooming or centering on certain parts of a background image, this can be done using the background image positioning in the settings. You can also do what Vlad said above and upload 4 different background images, 1 for each device and simply show/hide for each device.
Thank you all for your responses. Yes DFink that is what I was hoping for. Zooming or centering on certain parts of the background image. I am going to try both suggestions made here and see which one makes the most sense. I don’t have a specific example to show right now because I am just in the design process. But I am trying to move clients that want these types of graphic headers towards responsive design and so if I could give them both the header they want and also make it responsive it will be ideal.
