5 Replies - 493 Views - Last Post: 04 May 2013 - 07:22 PM

#1 xenatorres  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 06-September 11

Backgrounds not staying aligned

Posted 04 May 2013 - 04:17 PM

Hello.

I am building a site with a main image background - I will call this background A. This is the main image, a large graphic that is 825px in height. This image fades out at the bottom at which point you can see background B - a repeating line.

This makes the background appear to be one long background, but it's two images. This is because I need the background to grow with the content, but I don't want to repeat the main image (as this would be an ugly repeat of a complex image where you can see where it starts and stops).

I have put the repeating line in the body, and the main background as the first div. I had to made background B 1px smaller than background A to make them match up - which they do in FireFox and IE9. They do NOT match up in Safari, and if someone increases the size of the text on any browser, they don't line up anymore.

How can I have these two images appear with a flawless connection so you can't see there's two images?

This is the code:

body {
background: #000000 url("menu/images/redline.jpg") repeat-y center;
}

.wrapabout {
margin-left: auto;
margin-right: auto;
width: 1100px;
background-color: transparent;
background: url("menu/images/about_bg.jpg") no-repeat center;
margin: 0 auto;
position: relative;
}



Thank you.

Is This A Good Question/Topic? 0
  • +

Replies To: Backgrounds not staying aligned

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3473
  • View blog
  • Posts: 11,788
  • Joined: 12-December 12

Re: Backgrounds not staying aligned

Posted 04 May 2013 - 04:50 PM

Zero out the margins, padding and borders:

body {
    margin: 0; padding: 0; border: 0;
}

Alternatively, you could have two consecutive divs (or one nested inside the other) which have exactly the same metrics.

This post has been edited by andrewsw: 04 May 2013 - 04:51 PM

Was This Post Helpful? 0
  • +
  • -

#3 xenatorres  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 06-September 11

Re: Backgrounds not staying aligned

Posted 04 May 2013 - 04:57 PM

Thank you Andrew. The zeroing out didn't fix it. Still messed in Safari and they still don't expand the same if you zoom in.

I have done the nesting inside each other, which does work, except then I can't get the background to expand with the content - I have to manually set the height, which doesn't work for what I am doing.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3473
  • View blog
  • Posts: 11,788
  • Joined: 12-December 12

Re: Backgrounds not staying aligned

Posted 04 May 2013 - 05:19 PM

You might validate the HTML and CSS - there are links in my signature.

A link to a page would help or, failing this, more code or (less useful) screenshots.

This post has been edited by andrewsw: 04 May 2013 - 05:19 PM

Was This Post Helpful? 0
  • +
  • -

#5 xenatorres  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 06-September 11

Re: Backgrounds not staying aligned

Posted 04 May 2013 - 05:30 PM

Site: http://www.bitchofro...out/about2.html

Thank you. :)

The CSS was okay with validating. The HTML is yelling at me but it doesn't make any sense to me as it's giving me errors for things that work just fine. All the errors here are complete jibberish to me. :S
Was This Post Helpful? 0
  • +
  • -

#6 xenatorres  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 06-September 11

Re: Backgrounds not staying aligned

Posted 04 May 2013 - 07:22 PM

Okay, I fixed this problem - it was a stupid thing I messed up. :D

I have the background aligned now with this code:

html {
margin: 0; padding: 0; border: 0;
background: #000000 url("http://www.bitchofrome.com/menu/images/redline2.jpg") repeat-y center;
}

body {
margin: 0; padding: 0; border: 0;
background: url("http://www.bitchofrome.com/menu/images/about_bg2.jpg") no-repeat center;
}



The only issue now is the HTML background starts to cover up the body background when one zooms in (not right away - you'd have to have really bad eyesight to be zooming enough to cause this)

You can see the error here in IE9, FF20, or Safari5 if you zoom in enough - the HTML line background will start to cover the body background on the right:

http://www.bitchofro...out/about3.html

Maybe I can't fix that, but thought I'd ask. Thank you. :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1