• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Solution / Full Screen Width Image Inside Container
Screenshot of text with padding but image within goes to edge of screen.

Full Screen Width Image Inside Container

Last updated on July 22, 2018 by Sal Ferrarello

Images that appear wider than the text around them are a cool design technique. I do a lot of work with Bootstrap and unfortunately, I’ve found that getting this to work usually ends up with markup that leaves me unsatisfied – at least until now.

Full Width Image Outside of Container

How I’ve traditionally accomplished this effect.

 <div class="container">
      <div class="row">
           <div class="col-sm-12">
               <p>Lorem ipsum dolor sit amet...</p>
           </div>
      </div>
 </div>

 <img class="img-fluid" src="images/super-wide.jpg" alt="Super Wide Highway Picture.">

 <div class="container">
      <div class="row">
           <div class="col-sm-12">
               <p>Inani oblique detracto pro et...</p>
           </div>
      </div>
 </div>

Full Width Image Inside of Container

What I would really prefer is something like the following, where instead of closing and re-opening the col, row, and container elements, we use a class to make the image take up the full-area.

 <div class="container">
      <div class="row">
           <div class="col-sm-12">

                <p>Lorem ipsum dolor sit amet...</p>

                <div class="alignfull">
                    <img class="img-fluid" src="images/super-wide.jpg" alt="Super Wide Highway Picture.">
                </div>

                <p>Inani oblique detracto pro et...</p>

           </div>
      </div>
 </div>

Coincidentally, this is the same markup generated by the alignfull image alignment available in the new block-based WordPress editor.

Making Align Full Work

Bill Erickson has some great material on Getting your theme ready for Gutenberg (the new WordPress editor), which provided me with the following markup.

.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 1000%;
    width: auto;
}

This takes advantage of the CSS calc() function and viewport units (vw).

This looks great right up until your content gets tall enough that a vertical scroll bar appears, at which time you also get a horizontal scroll bar – ugh.

On my business website, I’ve previously written about How to Remove a Horizontal Scrollbar but this is a new problem.

I haven’t found a solution I love for this issue but I have found one I can live with. By wrapping the entire markup in a new div (fortunately, I was working with Genesis, which already has a div.site-container wrapping the whole page) and setting the new div to overflow: hidden;.

My CSS

.site-container {
    overflow: hidden;
}

.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 1000%;
    width: auto;
}

My Markup

<div class="site-container">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">

                <p>Lorem ipsum dolor sit amet...</p>

                <div class="alignfull">
                    <img class="img-fluid" src="images/super-wide.jpg" alt="Super Wide Highway Picture.">
                </div>

                <p>Inani oblique detracto pro et...</p>

            </div>
        </div>
    </div>
</div>

Demo

See my Full Screen Width Image Inside Container Demo

Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit

Filed Under: Dev Tips, Programming, Solution Tagged With: Bootstrap, CSS

Reader Interactions

Comments

  1. Enes says

    February 19, 2019 at 7:51 pm

    This horizontal scroll for alignfull elements were driving me crazy and that solution helped me to figure it out. Thank you so much !

    Reply
  2. Raj says

    March 14, 2020 at 8:40 pm

    awesome

    Reply
  3. Tim says

    June 18, 2022 at 2:23 pm

    Thanks, this is cool.
    Any idea how you could have a full width background image like you have but with text inside the div that is contrained like the other text to the fixed container?

    Reply
  4. Michael Silber says

    October 28, 2022 at 3:40 pm

    I love this post and thank you for the demo! Another alternative to get rid of the scrollbars is to hide them with CSS instead of hiding overflow. Hiding the overflow does cut off the image slightly, so if that’s a problem you can use…


    html { scrollbar-width: none }
    ::-webkit-scrollbar { display: none }

    Thanks again for the post!

    Reply
    • Michael Silber says

      October 28, 2022 at 3:41 pm

      …oh and if you’re going to do that then you can actually set the { max-width: 100vw }

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in