How create header that has adaptive banner graphic that shows on all computers and devices?

[jeomiland+ 2]

Have been pulling my hair out with how to solve this problem. On http://cassclayton.com/dev/ I have a top banner graphic in the Header section. Have tried designating the BG image also have used Revslider for the image. Had a suggestion by someone to use Mediabox, but that's a content width section and I need the whole image to show full width and to resize in both width and height on different browsers, computers and devices. CLient reports it looks fine on her PC but husband's PC, with same kind of monitor, has her head and the bottom of the image cut off!!! Looks fine on my Macbook pro and an iPad and Galaxie phone I checked.

One of you out there must have run into this sort of problem. How do you get a full width graphic to resize and display the whole image in the banner area???

Attached is what it is supposed to look like. Note BB King on left and trupet player on right, her whole head and the dashed wavy line are all elements of the design that need to show up.

Thanks for looking and advise.

 

[Simon 248]

you are using revslider to just add a full width background?

Just add a full width canvas area and give it a background and apply a height.

[jeomiland+ 2]

Hi simon

What height should be used? The client says this banner has a lot of critically important design elements which need to show up, in a responsive way, on all browsers, platforms and devices. I will try assigning a background and height of the actual image (which is 1440x252) but think that's how this whole thing started - it was looking different on different computers and she was not happy with the image getting cut off.

[Simon 248]

well maybe use media queries to make it look right on whatever devices she needs.

[jeomiland+ 2]

she and her husband both have PCs and she says the same size screen. On his, the image was cutoff when it looked fine on hers.

Earlier, on here the top and bottom looked fine but left-right were cutoff.

Is there no section in DMS that is both full width and responsive? As mentioned, someone had suggested Media box, but this is content width. Site layout is pixel width based layout and full width display. What effect would percentage width or boxed display have on this requirment for the whole image to display responsively in banner?

[Simon 248]

They both have PC with the same screen size yet one it looks ok and one it does not? Im afraid there is no CSS that will be able to target that.

You need to find out what the difference is between the couples two PCs first.

you can set any image background to 100% width but the aspect ratio will start to look weird at certain screen sizes.

Thats why you need to look at media queries to fix the issues..

 

[jeomiland+ 2]

Hi Simon

Appreciate the heads up re: media queries and looking into it.

I found the solutions actually was to use a PL Nextbox into which I simply wrote HTML <img > code. Set the width to 100% and it seems to be working.