Different left/right behaviour of spilled background images

StackOverflow https://stackoverflow.com/questions/23239307

  •  08-07-2023
  •  | 
  •  

Question

I am struggling with inconsistent behaviour in background images that spill outside their divs.

I am using a negative margin and positive padding to achieve this.

<!DOCTYPE html >
<html><head>
<style type="text/css">
body {
width: 1100px; margin: 0 auto; padding: 0; background-color: #FFFFFF;   
}
body:before, body:after {
height: 100%; width: calc((100% - 1100px)/2); background: rgba(188,188,188,0.29); z-index: 100; position: fixed; top: 0; content: "";
}
body:before {
float: left; left: 0;
}
body:after {
float: right; right: 0;
}
.fallleft, .fallright {
height: 390px;  width: 390px;  overflow:visible; background-image: url(picture.jpg);
}
.fallleft {
margin-left: -241px;
padding-left: 241px;
float: left;
}
.fallright {
margin-right: -241px;
padding-right: 241px;
float: right;
}
</style>
</head>
<body>
<div class="fallleft"></div>
<div class="fallright"></div>
</body>
</html>

The image used is 531x390px

For the most part, this does what I want. The page has its grey edges, and the images spill out beyond the main 1100px width, under the borders.

The problem is in behaviour when we make the window narrower, between 1100 and 1580px.

At this point, on the left, the background image spills to the left of the zero line, so disappears off the screen. I like this behaviour.

But on the right, the matching CSS creates additional canvas width (at least, it does in Firefox), so the page is then horizontally scrollable. And when scrolling horizontally, the whole bordered effect is ruined.

How do I achieve the same behaviour on the right, so excess background simply disappears under the edge of the browser, without creating new page width?

Was it helpful?

Solution

According to your comment, media queries might be suited to solve your problem:

@media screen and (min-width: 1100px){
    yourselector{
        overflow-x:hidden;
    }
}

This will hide the horizontal scrollbar as long as your screen is wider than 1100 pixels.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top