Untitled UI logotext
Solutions
WebsitesEcommerceMobile AppsWeb AppsProduction Support & Maintenance
Our work
Company
About usBlogPodcastContact us
Book a free consultation

How to Fake a Half-Width Responsive Background Image

Olivia Rhye

I recently ran into a design that had needed background images on half-width columns but that also needed to cover the margins going all that way to the edge of the screen (i.e. outside of the half-width grid column) and I found that the best way to do it was to fake it with a percentage based background position.

The column on the right takes up 7 of 12 grid column within a max-width container of 1200px. The background image needs to cover the entire right side of the section no matter how wide the screen gets.

Ready to start a project?

Book a free consultation
Untitled UI logotext
Our work
About us
Blog
Careers
Submit a ticket
Agency Partnerships
Contact
© 2024 fjorge. All rights reserved.
Privacy