Trying to make a background image (jpg) fit a screen but all options don't seem to work...
The elements are created using innerHTML (I know, it's bad, I'm changing it once I figure this out) and currently the background has been applied to the root element (<div id="content"> in the html)
Repo: https://github.com/callum-laing/restaurant
I've attached 2 images to showcase my issue. I'm trying to figure out how to make this less... zoomed in? but I'm not entirely sure how to do it.. I don't care if i can't have the picture show as it should be, aslong as some of the food is in there to give it some sort of nice looking effect.
GitHub
GitHub - callum-laing/restaurant
Contribute to callum-laing/restaurant development by creating an account on GitHub.
8 Replies
New image here, but if I can somehow get the image to fit like this, it'd be perfect.. it seems to change based on how wide you have the screen.
You can also set background position!
I'd start at background-position: 50% 50% and play around with it until it's positioned how you want
But yes, unfortunately the image size plays a major part. You need a landscape (or wide) image
Portrait images will not work
yeah fair enough.. i'll keep searching 😄 thanks
did you try using a 16:9 image instead of an iphone 
haha
almost done. just have to figure out why there's a little gap at the top/bottom of the transparent background
https://callum-laing.github.io/restaurant/ Winning.