Home/ Questions/Q 9143911
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T10:08:27+00:00

I’m creating a website designed by a print-designer. The background concists of two images:

  • 0

I’m creating a website designed by a print-designer. The background concists of two images:

one gradient that is repeteated along the y-axis and aligned with the bottom of the page
one image that is aligned with the bottom of the page and centered.(the circle)

demo:
enter image description here

The circle-part is pretty big and has most of the pages content on it. (~900px by ~750px).

If the page is to small I need to add scrolls. If the page is to big. I need the first image(vertical) and background-color(horizontal) to fill out the area for me. I would like to use multiple backgrounds, but the site needs IE8-support.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Cut a 1px strip for the gradient and repeat it horizontally on the body. Set the attachment to fixed.

    Cut out the circle and place it as the background image of your content container. This will likely be a png with transparency to allow the previous gradient to show through.

    CSS

    body {
   background: url('bg.jpg') center bottom repeat-x fixed;
}

.container {
   background: url('circle.png') no-repeat center bottom;
   margin: 0 auto;
   min-height: 750px;
   width: 900px;
}

    HTML 

    <body>
 <div class="container">
    content here
 </div>
</body>
    • 0