As web designers and developers continue to push the boundaries of what is possible with modern website design, the use of different background widths for post layouts has become increasingly popular. This technique allows designers to create unique and eye-catching layouts that draw users in and keep them engaged.

One common way to use different background widths is to create a post layout with a full-width header at the top of the page, followed by a narrower content area below. This type of layout is often used on blog posts and news articles, as it allows the header image or video to take center stage while still providing ample space for the main content.

Another popular layout is to use a full-width background for the entire post, with the content area occupying a smaller, centered space within that background. This creates a sense of unity and cohesiveness and can be particularly effective for showcasing large, high-resolution images or videos.

Some designers opt to use different background widths within a single post to create a more dynamic and engaging experience for users. For example, a post might start with a full-width header image, followed by a section of text with a narrow background, and then another full-width image or video. This technique can be used to highlight different sections of the post and keep the user’s attention focused on the content.

So the use of different background widths can be a powerful tool for creating unique and compelling post layouts. Whether you’re designing a blog, news site, or any other type of website, experimenting with different background widths is a great way to add visual interest and keep users engaged.

In this post, we will design 3 different layouts with the minimum CSS possible.

We will start with the basic CSS for the design. Of course, you will need other CSS to style other parts of your website, but we will just focus on the container and background first.

We will be using var() function as it makes managing the changes easier.

html {overflow-x: hidden;}
:root {
	--width:100vw;
	--padding:20px;
}
@media (min-width:544px) {
	:root {
	--padding:32px;
}
}
@media (min-width:786px) {
	:root {
	--width:760px;
}
}
@media (min-width:940px) {
	:root {
	--width:880px;
	--padding:42px;
}
}
@media (min-width:1200px) {
	:root {
	--padding:56px;
}
}
.container {max-width:var(--width);margin:;padding:var(--padding);}
.content-background {background:#fff;}

Background Stretching till the Container Post Layouts

Now I want that need section of my post should have background stretching till the container. Then we need to add this CSS.

.b-cont{margin: 0 calc(-1 * var(--padding));padding: var(--padding);}

HTML of the text.

<div class="container content-background">
<div class="b-cont">
<p>Any random text here.</p>
<p>I will talk about my self then.</p>
<p>I do Web development profesionaly.</p>
<p>You will find me playing football or in the Gym when now working.</p>
</div>
</div>