Member Avatar for shaya4207

I have a page with dynamic content on it, and I have a background image (put there with CSS as a "background"). I'm trying to have it stretch NOT REPEAT with the content, when there's more content it should be longer...

Any help would be very appreciated!!!

  • 5 Contributors
  • 13 Replies
  • 254 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Short answer: use modern CSS to scale the background to the container that holds your content, and fall back to an absolutely positioned image (or a tiny JS update) only for very old browsers. That gives the behavior you asked for — the artwork stretches as the page grows — without forcing a fixed-position “glass sheet” effect.

A simple CSS-first solution (works in current browsers) is to put the image on the element that expands with content and use background-size to control how it scales. Example:

.page {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: auto 100%; /* image height matches element height; width scales to preserve aspect ratio */
}

background-size: auto 100% will scale the image height to the element height as content grows; 100% 100% would force both dimensions (distorting the image), while cover keeps aspect ratio but may crop.

If you need an older-browser fallback or want a reliable result when content is added dynamically, place a positioned image behind the content and let it follow the container height. Two short patterns:

<div class="bg-wrap">
  <img class="bg-img" src="bg.jpg" alt="">
  <div class="content">...dynamic content...</div>
</div>
.bg-wrap { position: relative; }
.bg-img  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }

Use object-fit to preserve aspect ratio; for truly dynamic cases, update the bg element on resize or with a MutationObserver so it matches document height.

Notes and pitfalls: stretching will distort or pixelate small images — use a high‑res source, an SVG, or a tileable slice if you need lossless scaling. As pointed out, a fixed background looks similar but does not resize; and were right that an element/image approach can work, and ’s warning is worth heeding — test across browsers and different viewport sizes and provide progressive fallbacks.

Recommended Answers

All 13 Replies

Member Avatar for almostbob

why not
fix the background in place and have the content scroll over it

body {background:#ffffff url('img.png') no-repeat fixed 0 0;}
Member Avatar for shaya4207

But that wouldn't make the image stretch, fixing it when I scroll doesn't really help

Member Avatar for almostbob

the background image occupies the window and text slides over it as if written on a glass sheet,
the user sees no difference to a stretched image, the background is always in place, except the image is not distorted and stretched to fit a 2500px(example) high page

look at this demonstration and see if it changes your mind

Edited by almostbob because: n/a
Member Avatar for Member #120589

AFAIK, you can't change the dimensions of a background image via css. Mind you, I'm working on CSS in the year of our lord 1546. You can set its 'position' and 'repeat'. Whether you can mess with it via JS, I don't know.

A cheat could be to place an absolutely positioned image within a div and set that to a set width/height/position - to force a dimension - that can be done dynamically with php.
You can place the div with a low z-index, so that it shows beneath the rest of the site.

Member Avatar for drjohn

give the image a height of 100% and a width of 100% (or whatever numbers suit you.

HOWEVER it will look distorted and pixelated

Edited by drjohn because: n/a
commented: like it - doh! fuzzy thinking on my part +6
Member Avatar for shaya4207

the background image occupies the window and text slides over it as if written on a glass sheet,
the user sees no difference to a stretched image, the background is always in place, except the image is not distorted and stretched to fit a 2500px(example) high page

look at this demonstration and see if it changes your mind

I'm aware of the fact that it might get distorted, but having it fixed in one place is definitely not gonna work for me

Member Avatar for shaya4207

AFAIK, you can't change the dimensions of a background image via css. Mind you, I'm working on CSS in the year of our lord 1546. You can set its 'position' and 'repeat'. Whether you can mess with it via JS, I don't know.

A cheat could be to place an absolutely positioned image within a div and set that to a set width/height/position - to force a dimension - that can be done dynamically with php.
You can place the div with a low z-index, so that it shows beneath the rest of the site.

Sounds interesting, you mind elaborating on the php part please?

Member Avatar for Member #120589

Well, Dr. John had it right with dimensions to 100%. This will also resize with the browser window. Nice one Dr.J - the simplest solution is always the best.

<div><img src="css/images/me.gif" width="100%" height="100%" /></div>

Worked for me.
You'll need to set the div position to whatever you need, e.g. absolute/relative and set its z-index.

Edited by Member #120589 because: n/a
Member Avatar for shaya4207

Well, Dr. John had it right with dimensions to 100%. This will also resize with the browser window. Nice one Dr.J - the simplest solution is always the best.

<div><img src="css/images/me.gif" width="100%" height="100%" /></div>

Worked for me.
You'll need to set the div position to whatever you need, e.g. absolute/relative and set its z-index.

Thanx a million, I'll check it out as soon as I get back to my desk...

Member Avatar for MidiMagic

That doesn't always work. It is browser dependent. And the size is determined when the page loads, not after a script adds content to the page.

Do not try to make content exactly fit either the screen or other content. It won't work on a different browser, or a different screen resolution.

Those new widescreen monitors play havoc w3ith making things fit.

Member Avatar for shaya4207

That doesn't always work. It is browser dependent. And the size is determined when the page loads, not after a script adds content to the page.

Do not try to make content exactly fit either the screen or other content. It won't work on a different browser, or a different screen resolution.

Those new widescreen monitors play havoc w3ith making things fit.

So what do you suggest I do?

Member Avatar for Member #120589

That doesn't always work. It is browser dependent. And the size is determined when the page loads, not after a script adds content to the page.

Do not try to make content exactly fit either the screen or other content. It won't work on a different browser, or a different screen resolution.

Those new widescreen monitors play havoc w3ith making things fit.

I tried it in FF,IE7,Chrome - 100% width image with resize on browser window resize. You can use a min-width and/or max-width for the page, which should constrain the div image - unless you make it absolute.

Member Avatar for MidiMagic

So what do you suggest I do?

I suggest you "DON'T."

DON'T expect a web page to behave like a Word document. The web standards aren't designed for that. Web pages flow to fill the available space.

DON'T expect to place things at certain places within the browser viewport. They will not stay put with a different browser, a different screen resolution, or a different sized restored down window. And all of it changes with the new widescreen monitors.

DON'T expect to place a footer at the bottom of the viewport and have it actually be there on all computers. Footers are not defined for any web device except the table, and they go at the bottom of the table, not the screen.

DON'T define things in terms of absolute measurements, such as pixels and points. Use percentages and ems.

DON'T expect to exactly fill the entire screen with an image. You can have it fill the width (with width: 100%; ), but because of the varying aspect ratios, you can't make it fill the height on all computers. Note that if several attributes conflict, the browser will sacrifice a height attribute first to satisfy the others.

DON'T expect a tight design to stay together on all screen resolutions. Design it for a low resolution screen, and use percentages, so the parts stay in the same relative positions on higher resolutions.

Edited by MidiMagic because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.