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

Member Avatar for ingeva

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.

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 ingeva

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.

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.