CODEWITHSUNDEEP
cssimagepositioningscreen-resolution
Extra Smooth
Extra Smooth

Reputation: 1

CSS: Image position corrections at different screen resolutions

I'm simply blocking out different images on a site right now using HTML and CSS and I'm having a problem with a symbol moving to the right of the screen at smaller resolutions.

The actual image I want (and that appears at 1600x1024 resolution) looks like so: https://i.sstatic.net/nVKDh.jpg

But at lower resolutions (1280x1024) it looks like: https://i.sstatic.net/A0lZ3.jpg

The HTML code for the whole page is as follows:

   <html>
   <head>
   <link rel="stylesheet" type="text/css" href="thrall.css">
   </head>
   <body>

   <img src="images/background.jpg" width="1600" length="1200" class="bg">

   <img src="images/titlebox.jpg" class="titlebox">

   <img src="images/symbol.png" class="symbol">

   <img src="images/transbox.jpg" class="transbox">

   </body>
   </html>

The CSS for the whole page is as follows:

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

img.titlebox {
    /*Keep it bounded for different resolutions*/   
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */

    /*Position*/
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -500px;
    z-index: -1;
}

img.symbol {
    /*Keep it bounded for different resolutions*/
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
    margin:auto;

    /*Position*/
    position: absolute;
    top: 5%;
    left: 20%;
  }

  div.containsymbol {
    width:100%;
    margin:auto;
  }

  img.transbox {
    /*Keep it bounded for different resolutions*/
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */

    /*Opacity*/
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */

    /*Position*/
    position: absolute;
    top: 21.5%;
    left: 50%;
    margin-left: -500px;
    z-index: -1;
}
  }

I gather that this is an issue with the symbol's absolute position and that relative positioning might be a solution, but I lack the experience to see how to bring about a resolution myself9and that might apply to which I'm not currently using).

I hope I've provided enough information here and look forward to any assistance anyone can give.

Upvotes: 0

Views: 8114

Answers (2)

Meysam Naderi
Meysam Naderi

Reputation: 113

When you're using absolute positioning your parent element position should be relative otherwise it will be positioned relative to the body. according to your pictures your looking for something like this:

<html>
<body style="margin:0;background:url(images/background.jpg) no-repeat fixed;background-size:100% 100%;">
     <div style="background:url(images/titlebox.jpg); width:80%; margin: 0 auto;">
        <img src="images/symbol.png" style="width:auto;margin:5%" alt="symbol"/>
     </div>
     <div style="background-image:url(images/transbox.jpg); width:80%; margin: 0 auto;min-height:200px;">
     </div>
 </body>
 </html>

also you can use css to set the color of your boxes instead of using img tags transbox.jpg and titlebox.jpg, it would make your site load faster.

Upvotes: 1

Arif Khan
Arif Khan

Reputation: 67

Try this-

<img src="images/background.jpg" style="width:100%; height:1200px;" class="bg">

Maybe it works! If not please give 4 images used on your site.

Upvotes: 0

Related Questions