Home/ Questions/Q 7218197
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T21:27:05+00:00

I’d like a scaleable/flexible fullscreen inline image (no cropping) that will allow for content

  • 0

I’d like a scaleable/flexible fullscreen inline image (no cropping) that will allow for content to sit beneath it just like any other webpage. Is this possible? All I keep seeing is solutions for position:fixed; which, isn’t feasible for me.

I have been playing around with the code over at: http://css-tricks.com/perfect-full-page-background-image/ but modifying them to do what I want doesn’t seem to work. The scaling of the image is all wrong and often crops the image, which again isn’t what i’d like it to do.

Here is the code for as a rough idea:

<!DOCTYPE html>

<html>
<head>
<title></title>
</head>

<body>
<!-- full width and height image -->
<div id="feature-wrapper">
   <img src="img/feature.jpg"/>
</div>
<!-- /end fullwidth/height image -->

<!-- lots of content that sits directly beneath big image -->
<img src="img/about-mug.jpg"/>

<img src="img/project1.jpg"/>

<p>Some more content beneath feature</p>

</body>
</html>

Any pointers appreciated. jQuery solutions welcome 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    #feature-wrapper img {
    width  : 100%;
    height : auto;
}

    This will keep the image inline with the rest of the content; a larger image will push content lower than a smaller one (based on screen-size). This will also keep the aspect ratio of the image intact.

    Here is a demo: http://jsfiddle.net/qzvXa/ (Notice how the image re-sizes and the content below shifts as you re-size the page)

    Update

    The link you provided is for creating a fullscreen background image, if you want to do that but keep the aspect ratio of your image then you can set the image’s container to position : absolute or position : fixed and still retain the aspect ratio for the image:

    /*set our fullscreen background image's width/height and z-index to something low*/
#feature-wrapper img {
    width   : 100%;
    height  : auto;
    z-index : 1;
}

/*set our container's z-index to the same as the image it contains and make this element stretch the whole page*/
#feature-wrapper {
    z-index  : 1;
    position : absolute;
    top      : 0;
    left     : 0;
    right    : 0;
    bottom   : 0;
}

/*you have to make sure your content will actually display over the background image,
`position : relative` is necessary because z-index isn't applied to elements with `position : static`*/
img, p {
    position : relative;
    z-index  : 2;
}

    Here is a demo: http://jsfiddle.net/qzvXa/1/

    • 0