Home/ Questions/Q 7754885
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T12:25:36+00:00

I have created a page with a static image positioned to the ride side

  • 0

I have created a page with a static image positioned to the ride side of the browser at full height (with a gradient over it) and a block of text to the left. I want the image to resize with the browser window, however I do not want the image to go behind the text or to get smaller than the text. When I set a min-width and min-height on the body, for example 1024×768, this doesn’t solve the problem. Am I doing something wrong? How should I go about doing this?

Thanks in advance!

Here’s my code:

<style type="text/css">
html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    min-width: 1024px;
    min-height: 768px;
}
#background-image {
    position: absolute;
    right: 0;
    top: 0; 
    height: 100%;
    background-image: url('image.jpg');
    z-index: -1;
}
#background-gradient {
    position: absolute;
    right: 0;
    top: 0; 
    z-index: 0;
    height: 100%;
}
#content {
    position: absolute;
    left: 15%;
    top: 15%;
    width: 500px;
    font-family: Georgia;
    font-size: 16px;
}
p.dropcap:first-letter {
    float: left;
    font-size: 50px;
    line-height: 30px;
    padding-top: 2px;
    padding-right: 4px;
    font-family: Georgia;
}
h1 {
    font-size: 55px;    
}
</style>
</head>

<body>
<img id="background-image" src="image.jpg" />
<img id="background-gradient" src="gradient.png" />
<div id="content">
<h1>[TITLE]</h1>
<p class="dropcap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh lectus, vehicula quis elementum nec, pellentesque vitae est. In in libero pulvinar felis ultrices varius vel at augue. Suspendisse sollicitudin risus eu mauris ultrices nec auctor neque facilisis. Pellentesque commodo tellus quam. Praesent dictum sodales nisi, id tempor neque hendrerit id. Ut non mi a ante pulvinar tempor. Morbi scelerisque metus eu sem iaculis hendrerit. Integer pulvinar ipsum quis ante tincidunt gravida.</p>
<p>Nullam vel tellus sed mauris sagittis egestas at sed lacus. Pellentesque sit amet justo felis. Donec sit amet est in urna consectetur convallis vitae id justo. Sed adipiscing accumsan augue, at cursus lorem bibendum nec. Etiam diam odio, sagittis ut tempor fermentum, elementum eu erat. Vivamus pharetra, nibh vel elementum pulvinar, risus leo ornare felis, eget tincidunt velit odio non turpis. Proin semper metus eget nisi varius varius elementum nisl eleifend. Nulla facilisi. Suspendisse urna sapien, pulvinar non porttitor pellentesque, laoreet id leo. Praesent sed tortor quis tellus eleifend ultricies et eu eros. Sed massa eros, hendrerit eu facilisis sed, fermentum sit amet purus. Nulla aliquam eleifend ante, tincidunt pulvinar dolor elementum eu. Proin quis justo in arcu sollicitudin faucibus ac tincidunt ligula.</p>
</div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Put all your HTML code inside a container div which is directly inside body. You can then move the CSS code from body to #container, like this:

    #container {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    min-width: 1024px;
    min-height: 768px;
}

    IIRC you can’t set min-width on body. You’ll want to be careful though, because the earlier versions of IE don’t support min-width.

    • 0