Login | Register | FAQ
Anonymous

Background image centered but not aligned with page content

+ Post a reply

4 posts Page 1 of 1


Background image centered but not aligned with page content

by _saint » Mon Aug 12, 2013 2:53 am

I have a simple site made that contains only img's. I centered them by placing them in a wrapper div, defining the width of the div, and then setting the div's left and right margins to "auto". Now I want to add a background image framing the img's, so I set the background-position to "center". But now, at resolutions low enough that the whole page isn't on the screen, the img's have their left edges flush to the edge of the window (which is what I want to happen), but the background image is enlarged in such a way that it goes off both sides of the screen. The result is that the background and the img's are not aligned with each other.

For the site to look the way I want it to, the background image needs to stay flush with the left edge of the window, even at low resolutions. Is there any way to manage this?

Here's the html:

Code: Select all
<html>

<title>
It's All So Ugly
</title>

<link rel="stylesheet" type="text/css" href="style.css" />

<div class="wrapper">

<body>

<div class="top"><img src="finaltop.gif"><br/></div>

<div class="comic"><img src="comic.gif"<br/></div>

<div class="bottom"><img src="finalbottom.gif"><br/></div>

</body>

</div>

</html>


and here's the css

Code: Select all
html, body, div, img {
   margin: 0;
   padding: 0;
   border: 0;
}

   body {
      background-color: #000000;
      background-image: url("finalback.gif");
      background-repeat: repeat-y;
      background-position: center;

   }

   div.wrapper {
      position: relative;
      width: 1250px;
      margin-left: auto;
      margin-right: auto;

   }

   div.top {
      position: relative;

   }

   div.comic {
      width: 1125px;
      position: relative;
      left: 125px;
      z-index: 2;

   }

   div.bottom {
      height: 1225px;
      position: relative;
      top: -175px;

   }


p.s. I don't know if my explanation is perfectly clear; if I need to restate something to make myself clearer, just ask.

Last edited by _saint on Mon Aug 12, 2013 4:13 am, edited 2 times in total.

User avatar

_saint

  • Posts: 3
  • Joined: Mon Aug 12, 2013 2:40 am

Re: Background image centered but not aligned with page cont

by _saint » Mon Aug 12, 2013 4:07 am

CubeSquare wrote:Hello _saint,

What would be more helpful is seeing your code, including your stylesheet.


You're right, I added the code to the post, hope that'll help.
User avatar

_saint

  • Posts: 3
  • Joined: Mon Aug 12, 2013 2:40 am

Re: Background image centered but not aligned with page cont

by _saint » Mon Aug 12, 2013 10:04 am

I managed to figure it out myself. What I did was to set the background image as the background of the wrapper div, rather than of the page as a whole.

Code: Select all
   body {
      background-color: #000000;

   }

   div.wrapper {
      background:url('back.gif') repeat-y;
      position: relative;
      width: 1250px;
      margin-left: auto;
      margin-right: auto;

   }
User avatar

_saint

  • Posts: 3
  • Joined: Mon Aug 12, 2013 2:40 am

Re: Background image centered but not aligned with page cont

by XainPro » Wed Aug 14, 2013 9:05 pm

self-directed learning is best learning.
good luck for further learning.
User avatar

XainPro

  • Posts: 3933
  • Joined: Fri Feb 17, 2012 8:10 pm


+ Post a reply

Page 1 of 1

cron