Hi folks,
I’ve put together a test site to replace our current website. I’m a bit stuck with how to adjust the background header image so my head doesn’t get cut off in larger screens. Any thoughts?
[url deleted]
BTW we’ll be re-doing the photo so we line up a bit better. 
Any help appreciated. Thank you.
I think you might want to consider retaking the shot and having the other person and yourself be more level with each other. Not exactly level, just closer so the shot is more usable. I think you will find it kind of difficult to get that photo within that area.
Thank you. We’ve evened up the head levels but the button ends up covering our faces at some resolutions.
Perhaps a media query or two is needed to use different images at certain screen sizes but when I do that it says that element.style, which I understand to be the inline CSS, takes presedence. How do we get around that?
I am currently working on a similar issue with a client. I ended up needing two versions of the image, one full-size and one cropped/sized for mobile with media queries.
I would remove any inline styles because they will overrde the style (rememer the C in CSS is for cascading) and use a new class or ID for the style. I hope this helps.
Also when you’re looking at how to display the image, you may need to use some CSS background-size properties to get it to display how you want it. I typically end up using “cover” as the value and usually on phone size I take a lot of images out of the display completely so that the site will load up quicker.
Done, thx. Got it sorted now.
Indeed, “Cover” seems like the way to go. I’m using a smaller image for mobile. TY for your responses.