0

I have a CSS background image that will stay centered no matter what the browser size is. The image used does not stretch the entire width of the browser. This being the case, I need the divs I have also placed in the CSS with background images and links to maintain their position relative to the background image that stays centered no matter what the browser size is.

I have dabbled around with.

position:relative;

but it cascades all the elements and doesn't allow specific positioning that I am looking for. Here is the code I am working with. I appreciate any insight to my newb question, and look forward to learning how this behaves better.

When this code is viewed on different sized browsers, with a background image that does not span the entire width, the elements move around because they are set to percentage. I need them to stay where they are but remain centered with the background. I am not sure how to write this in CSS and have been struggling with it for some time. Thankyou for any guidance on this specific issue.

body {
    background:#000 url(bg.jpg) no-repeat center 0;
}
#logo {
    margin: 0px 11%;
    padding: 0;
    position:absolute;
}
double-beep
  • 5,031
  • 17
  • 33
  • 41
Brandon Pierce
  • 1
  • 1

1 Answers1

0

try grouping elements you want to put next to it together inside a div ~say container~ and set the background to the div. Then set the div ~container~ position to relative and center it.

Then align other elements using position absolute and top bottom left right property wrt the ~container~div.

here is the code for it

 <div id="container">
     <div id="element1"></div>
     <div id="element1"></div>
 </div>

<style type="text/css">
  #container {
      background:#000 url(bg.jpg) no-repeat center 0;
      width: 800px; height: 400px
      position: relative;
      top: 50%; left: 50%;
      margin-top: -200px; margin-left: -400px }
  #element1 {
      position: absolute;
      top: -30px; left: -20px;}
  #element2 {
      position: absolute;
      top: 410px; left: 820px;}
</style>
Shivam Shah
  • 524
  • 5
  • 10