Learn how to use CSS to make images full-screen width (full-bleed) even when the rest of your content has a constrained layout width.
The following CSS code is a “trick” to make images expand to the full width of your screen (from edge to edge) regardless of the width of the rest of your page layout.
First, here’s a CSS class with the required style properties:
.full-screen-width {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
width: 100vw;
}Quick video example
How the full-screen image-width code above works in practice:
You may be able to immediately use the CSS class above in your projects. It depends on how your specific project is structured and styled already.
Read on to learn how to recreate the video example from above, and that will give you more perspective on how to use it in a practical sense.
Full-screen image width in an article layout
In the video illustration above, we have a simple article layout for a page with one image an a few paragraphs. Let’s put it together!
The HTML
<article>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, officiis.
Nesciunt, odio enim ipsam repellat iusto maxime nihil, iure cumque quis
pariatur obcaecati libero harum ea officiis. Corrupti, itaque vitae?
</p>
<img
class="full-screen-width"
src="https://images.unsplash.com/photo-1450096315186-13dc369ab43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
alt="A happy dog looking out a door window"
/>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque ducimus
incidunt sint sequi, voluptates neque nulla ratione, aliquam aut tempora
explicabo consectetur beatae eum commodi quibusdam ad soluta labore tenetur!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti,
blanditiis tempore ab nam dolores ratione accusantium labore pariatur quasi!
Numquam quod corporis, necessitatibus ipsum sequi vel. Suscipit, aliquam
dolorem?
</p>
</article>To make the full-screen image width code work in practice, you need to do two other things besides styling the image element:
- Control overflow on the x-axis of the
<body>element - Control the layout width on the
<article>element
Here‘s all the CSS code for a working example:
body {
overflow-x: hidden;
}
article {
max-width: 700px;
margin: 3rem auto;
padding: 0 2rem;
}
.full-screen-width {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
width: 100vw;
}Now you can apply the .full-screen-width class to any image element in your project (inside a constrained layout width) and its width will span from edge to edge of the screen.
Photo credit: Andrew Pons
