Centered background with a chrome bug pattern

Question

Centered background with a chrome bug pattern

My background image appears centered, but Chrome displays it offset by one pixel.

CSS

#container { 
    background: url("images/header.jpg") no-repeat scroll 50% transparent;
    width: 100%
}
#header {
    width: 986px;
    margin: 100px auto 0 auto;
}

HTML

<html>
<body>
    <div id="container">
        <div id="header">centered content</div>
    </div>
</body>
</html>

It seems to be related to how different browsers handle the center or 50% property of the background in CSS:

Are there any known (simple) hacks or alternative methods to fix this? The background container must remain 100% wide.

css google-chrome safari background-image

Answer 1

Answer №1

To resolve the issue, try expanding the width of your image beyond the browser window.

I came across a helpful solution on this site -

Answer 2

To resolve the issue, try expanding the width of your image beyond the browser window.

I came across a helpful solution on this site -

Answer 3

Answer №2

This solution worked perfectly for me:

@media screen and (-webkit-min-device-pixel-ratio:0) { 

html {
    margin-left: 1px;
}

}

Once I track down the source where I found this tip a few days ago, I will share the link. The individual who shared it also mentioned that the issue was related to odd or even container widths. Regardless, this resolved the issue in my specific situation.

Answer 4

This solution worked perfectly for me:

@media screen and (-webkit-min-device-pixel-ratio:0) { 

html {
    margin-left: 1px;
}

}

Once I track down the source where I found this tip a few days ago, I will share the link. The individual who shared it also mentioned that the issue was related to odd or even container widths. Regardless, this resolved the issue in my specific situation.

Answer 5

Answer №3

For a consistent positioning experience across all browsers, try setting the background image width to an odd number like 987px. This might seem strange at first, but it has always worked for me without needing any CSS tricks.

Answer 6

For a consistent positioning experience across all browsers, try setting the background image width to an odd number like 987px. This might seem strange at first, but it has always worked for me without needing any CSS tricks.

Answer 7

Answer №4

Is the picture truly 986 pixels wide? To address this issue, I discovered that adjusting the width of the image to an even number is the simplest solution.

Alternatively, you can include a 2 pixel buffer in the background image to maintain an even width and prevent any shifting. By adding one pixel to each side, the appearance of your image in the browser should remain unchanged.

Answer 8

Is the picture truly 986 pixels wide? To address this issue, I discovered that adjusting the width of the image to an even number is the simplest solution.

Alternatively, you can include a 2 pixel buffer in the background image to maintain an even width and prevent any shifting. By adding one pixel to each side, the appearance of your image in the browser should remain unchanged.

Answer 9

Answer №5

Experiment with adjusting the size of your browser to observe its functionality. We are discussing pixels in this context, and if the window's width is not perfectly even, a pixel will need to be sacrificed somewhere.

Answer 10

Experiment with adjusting the size of your browser to observe its functionality. We are discussing pixels in this context, and if the window's width is not perfectly even, a pixel will need to be sacrificed somewhere.

Answer 11

Answer №6

Could it be that the background image also has a width of 986 pixels? In that case, this effect would need to be reflected on the left side, albeit in a reversed manner.

My suggestion is to take out the background image from the container and place it in the header instead:

#container {
    width: 100%;
}
#header {
    width: 986px;
    background: url("images/header.jpg") no-repeat scroll 50% transparent;
    margin: 100px auto 0 auto;
}

Answer 12

Could it be that the background image also has a width of 986 pixels? In that case, this effect would need to be reflected on the left side, albeit in a reversed manner.

My suggestion is to take out the background image from the container and place it in the header instead:

#container {
    width: 100%;
}
#header {
    width: 986px;
    background: url("images/header.jpg") no-repeat scroll 50% transparent;
    margin: 100px auto 0 auto;
}

Answer 13

Answer №7

To address the issue in webkit, I utilized the following snippet of CSS. In case JavaScript is not enabled, the code assumes that the browser will likely be in full screen mode, resulting in an odd viewport width on webkit browsers.

CSS Code

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    html {
        margin-left: 1px;
    }
    html.evenWidth {
        margin-left: 0px;
    }
}

JavaScript using jQuery

$(document).ready(function() {
    var oWindow = $(window),
    htmlEl = $('html');

    function window_width() {
        if(oWindow.width() % 2 == 0) {
            htmlEl.addClass('evenWidth');
        } else {
            htmlEl.removeClass('evenWidth');
        }
    }

    $(document).ready(function(){
        window_width();
        $(window).resize(window_width);
    });
});

Answer 14

To address the issue in webkit, I utilized the following snippet of CSS. In case JavaScript is not enabled, the code assumes that the browser will likely be in full screen mode, resulting in an odd viewport width on webkit browsers.

CSS Code

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    html {
        margin-left: 1px;
    }
    html.evenWidth {
        margin-left: 0px;
    }
}

JavaScript using jQuery

$(document).ready(function() {
    var oWindow = $(window),
    htmlEl = $('html');

    function window_width() {
        if(oWindow.width() % 2 == 0) {
            htmlEl.addClass('evenWidth');
        } else {
            htmlEl.removeClass('evenWidth');
        }
    }

    $(document).ready(function(){
        window_width();
        $(window).resize(window_width);
    });
});

Centered background with a chrome bug pattern

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Positioning icon/image beside the input box

Divide the toggle buttons into separate rows for better organization

Retrieving Basic HTML Source Code in UITextView Without CSS Styling Using Objective-C

Unable to Render CSS After Submitting a Post with Express

Ways to transition to the subsequent page in Selenium WebDriver following the click of the submit button

Unable to scroll within ion-view component

What could be the reason for the presence of three pixels of white space below this particular table

How to align two divs in CSS when they are not always both present

Adjusting the height of a textarea in React mui to match its parent element height

Adjusting the size of MaterialUI SVG icon: a simple guide

What causes a semiopaque background to show through in an adjacent div?

Ways to maintain image size while zooming out a webpage with CSS

Tips for minimizing the width of a form in CSS/HTML

Modify the text field's color when it is in a disabled state

I am interested in developing a select box with autocomplete functionality

Utilizing Bootstrap to arrange table cells in a shifted manner

Maintaining the initial value of a textbox in jQuery across various focusin events

Bootstrap 4 utilized for creating a dynamic carousel of quotes that adjusts to

Guide on linking an id with a trigger function in HTML and JavaScript

Blurred border encircling a CSS circle styled with overflow: hidden;