CSS make background image overlap container - html

Question

I was wondering how to make an image overlap the container width it is placed in.
So, for example:
<div class="container">
<div class="background-image"></div>
</div>
And the CSS
.container {
max-width: 1170px;
}
.background-image {
background: url(/img/my-image.jpg) no-repeat center center;
}
So on a 1663px wide screen, the .container class is 1170px wide. The background image is 1170px wide as well.
What I'm trying to achieve, is make the image full-width (overlap the .container class so it's 1663px wide) without adjusting the HTML.
Thank you in advance.

Answer 1

For a fixed width of 1663px...
.container {
max-width: 1170px;
background: salmon;
padding: 50px 0;
margin: 0 auto;
}
.background-image {
background: url(https://www.fillmurray.com/800/300) no-repeat center center;
background-size: cover;
height: 300px;
/* The important part... */
width: 1663px;
max-width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
}
<div class="container">
<div class="background-image"></div>
</div>
(remove the max-width: 100vw; if you don't want the width to adjust with the window)
Or if you would rather full width...
.container {
max-width: 1170px;
background: salmon;
padding: 50px 0;
margin: 0 auto;
}
.background-image {
background: url(https://www.fillmurray.com/800/300) no-repeat center center;
background-size: cover;
height: 300px;
/* The important part... */
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50vw);
}
<div class="container">
<div class="background-image"></div>
</div>

Answer 2

If I understand your question correctly, You need to background image with full width.
.container {
max-width: 500px;
min-height: 500px;
background: blue;
margin: 0 auto;
color: red;
}
.background-image {
background: url(https://www.w3schools.com/cssref/paper.gif) repeat center center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
z-index: -1;
}
<div class="container">
<div class="background-image"></div>
container
</div>

Answer 3

If I understand your question correctly, you are looking for the property background-size: cover which will create the desired effect, i have added a code snippet so you can see.
.container {
max-width: 1170px;
}
.background-image {
background: url(/img/my-image.jpg) no-repeat center center;
background-size: cover;
/* This will create the effect you are looking for */
background-color: #000000;
/* This can be removed, for illustration purposes only*/
height: 500px;
/* This can be removed, for illustration purposes only*/
}
<div class="container">
<div class="background-image"></div>
</div>