Geek asks and answers

Problems with image positioning for a smooth transition with the background

On my webpage, the background is a large image, and the top banner has some elements that overflow in the background. Banner and background should blend well.

No matter what I do, there is 1 pixel separating the banner from the rest of the image on the background.

CSS

/* body layout */
body {
    background: url(../images/background-home.jpg) no-repeat top center; 
    margin: 0;
    padding: 0;
    color: #404e54;
}

/* top banner */
#banner{
    width:980px;
    height:423px;
    background-image:url(../images/top-banner.jpg);
    background-position:top left; /* I tryed changing this - the image is 980px*/
}

/* main container */
.container {
    width:980px; 
    margin:0 auto;
}

Main page layout:

...
</head>
<body>
<div class="container">
<div id="#banner"></div>
...
</div>
</body>
...

I will try to download the image to show the problem, and if still not enough, try to download the example somewhere.

+3
source share
2 answers

, , margin: 0 auto;, , top center; , -, .

IE. " , 1px jog, , , , .

, , , , 100% - div top center, .. , . , , 1px ... , PNG.

+1

, , - 1px out ( ) - , , - "" "" 980px.

, 1px , position: relative , left: 1px, left: -1px; , .

1px , , , ;)

0

More articles:


All Articles