Member Avatar for varundeveloper

can anyone suggest html/ css code for auto resizing background image to fit screen width

  • 3 Contributors
  • 5 Replies
  • 330 Views
  • 5 Months Discussion Span
  • Latest Post Latest Post by ls233

Dani AI

Generated

Short guide that follows the thread: wanted a background image that automatically fits a preset div width using only HTML/CSS; suggested using a regular image behind content, which can work but has limitations when you need the image to behave like a true background (scale, crop, and keep a fixed div shape). The two most robust, CSS-only approaches are: (A) make the image the div background and use CSS scaling keywords, or (B) keep a semantic <img> but use CSS to make it behave like a background (object-fit). Both preserve aspect ratio without JS.

Example A — background on the div (recommended when image is purely decorative):

.card {
  max-width: 800px;           /* your preset div width */
  aspect-ratio: 16 / 9;       /* keeps a predictable height; optional */
  background-image: url("hero.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;     /* use 'contain' to show whole image instead */
}

Use cover to fill the box (cropping if needed), or contain to fit the whole image (may leave empty space). If you don’t want to set aspect-ratio, give the div an explicit height or use the padding-bottom ratio trick as a fallback. (developer.mozilla.org)

Example B — keep an <img> for semantics/accessibility, but scale it with object-fit:

<div class="frame" aria-hidden="false">
  <img src="hero.jpg" alt="Descriptive alt text">
</div>
.frame { max-width: 800px; height: 300px; overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

object-fit makes the replaced element scale/crop like a background while keeping the <img> element. If you need older-browser support, prefer the background approach as a fallback. (developer.mozilla.org)

If you need responsive asset switching (different file sizes or crops per breakpoint), use <picture>/srcset so the browser downloads appropriately sized images rather than scaling a huge file. Also set a sensible background-color or alt text as fallbacks. These techniques together solve the “fit inside a preset div width” requirement without JavaScript. (developer.mozilla.org)

Recommended Answers

All 5 Replies

Member Avatar for Member #360561

can anyone suggest html/ css code for auto resizing background image to fit screen width

Define it as a normal image, and set this style:

.background
{   position:absolute;
     top:0;
     left:0;
     width:100%;
     z-index:-1;
}

Then use:
<img class='background' src='sourcefile'>

Oh, in the subject line you write div width and in the body you write screen width. The above is for screen width but I'm sure you can adjust to also fit it in a div, although the div width may be decided by the image width.

Member Avatar for varundeveloper

thanks for that.....
But still i need to fit the image within my pre-set div width....
and i want to do it using only css/html....

Member Avatar for Member #360561

thanks for that.....
But still i need to fit the image within my pre-set div width....
and i want to do it using only css/html....

width=100%; should do the trick, but you may have to experiment with the positioning. I'm not 100% sure about it and don't have the inclination to do all the work for you! :)

You should be able to do it with only html/css as long as the parameters are right.

Take a look at this, which is a suggestion for the top banner of a site I've started to work on: http://intertrafico.com/eldjarn

Vary the width of the window and see the text size change.

You'll see that the banner fills much more than the screen; it's a div with 1600% screen width and the banner consists of pictures that are shown in a random order. If you need to you can check the source and download the css file.

Member Avatar for varundeveloper

yup....thanks

Member Avatar for ls233

can anyone suggest html/ css code for auto resizing background image to fit screen width

I came across this post while looking to solve the same problem. Have you finally found the solution? I'd be glad you could share it if so.

Thanks

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.