Technique for Using Photo in Rectangle of Full Browser Width for Web Design

radderfire · 10 Apr 2016 at 16:37

Hi Guys

I am currently refreshing my web design skills using modern CSS techniques. I am building a website from scratch, without using an off the shelf solution.

I want to use part of a photo as a rectangular image right across the full browser width. I will need this to be responsive, and cope with the full range of mobile and desktop browser widths. So, I'm interested in best practice. I was wondering how you cope with particularly wide browsers, and what the optimum maximum pixel width and file size for the photo is.

Could I have any comments on best technique, or any links to relevant tutorials.

Thanks

dmsims · 10 Apr 2016 at 17:41

Seems like a simple! question but it's actually pretty complex (and one that I haven't found a completely satisfactory answer to - if you have say lots of product images)

Firstly you want to keep the file size down so something like image magick

You might be happy just using CSS background images -if not there are other techniques .....

Dup · 10 Apr 2016 at 18:38

Assiming this is just a one off banner image, you'll want to make a div at the size you need it at and set background image then add background-size:cover;

Width I would use at least 1440px but 2560px would be more ideal. Make sure the image is well optimised however. You could also specificy alternative sized images for smalled screen sizes using media queries.

radderfire · 10 Apr 2016 at 21:03

Thanks for the replies.

I was thinking about using a large rectangular image on each page. However, I don't have to, and now I'm thinking maybe it's better not to if I want the site to load quickly on a mobile. That's the thing with web design, it's never as simple as you'd like it to be!!!

dmsims · 10 Apr 2016 at 21:27

If it's done properly the file size varies with the browser windows size (in steps)

Varwen · 12 Apr 2016 at 23:53

Wrapper div set to width: 100vw.

Easy way would be to set the background image of this div using css, which would allow you to load different images based on screen size using media queries, so you don't burn loads of bandwidth loading a full HD image on a tiny mobile. Note with this approach the height of the div wouldn't be set by the image height and would need to be set either by other content or using css.

I had a similar goal developing a site a couple of weeks ago, except the image was to be linked in an included PHP file (so clients could change it out using a CMS which can't modify my CSS files). I had to add a wrapper div with position: relative, and place an image element inside it set to height and width 100%. I also wanted banner text, so that was placed inside the div and set to position:absolute, using css to position it in the centre of the image.

Hope some of that helped!

radderfire · 13 Apr 2016 at 10:11

Yes, thanks for the reply.

gord · 13 Apr 2016 at 11:09

CSS background images on your full width rectangular element is the way to go. Use background-size: cover to handle the responsive side. Load different image sizes with media queries so your mobile isn't loading a 1440p image. 2560x1440 would be my max desktop image size now that 1440p monitors are much more prevalent, but the complexity of your image will influence the file size so you need to find a balance between load speed and clarity.