I'm having a really wierd problem with my CSS.

I have HTML which looks like this:

  <div class="header">
    <div class="header_content"><img src="/images/logo.gif" class="logo" /></div>
  </div>
  <div class="site_body">
     Hello
  </div>

and CSS:

body
{
    font-family: Arial,sans-serif;
    margin:0;
    padding:0;
    background-image:url(../Images/background.jpg);
    background-position:0 75px;
}
img.logo
{
    padding-top:10px;
}

.header
{
    height:75px;
    background-color:#000000;
}
.header_content
{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
}

.site_body
{
    width:970px;    
    margin-left:auto;
    margin-right:auto;
    background-image:url(../Images/page_background.jpg);
    background-repeat:repeat-y;
    background-position:0px 43px;
    padding:30px;
}

The background image for site_body is being vertically stretched slightly, it's really strange. This is a snippet of what it looks like, you can see how the background image is stretched and doesn't line up:

alt text

  • Do you have the same problem across all browsers? John Catterfeld about 6 years ago
  • Yes, I've tried in Firefox, Chrome and Safari, all the same. Charlie about 6 years ago
  • And you've double and triple checked that the problem doesn't lie in the images. Because I see no reason in your code this should be happening. Ktash about 6 years ago
  • I agree with Ktash. Can you host a version of the page for us to check, or at least provide the background image so we can recreate? John Catterfeld about 6 years ago

2 answers

0
points

background-image:url(../Images/background.jpg) no-repeat;

Answered about 6 years ago by Gideon Gauss
RoCa 0
0
points

body {

font-family: Arial,sans-serif;

margin:0;
padding:0;
background-image:url(../Images/background.jpg);
background-position:0 75px;
repeat: no-repeat;

}

if you need to repeat the background without it been stretch then set the repeat x or y

Answered about 6 years ago by RoCa