1,105,242 Community Members

auto resize back ground image to fit div width

Member Avatar
varundeveloper
Newbie Poster
8 posts since Aug 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
ingeva
Junior Poster
106 posts since Jul 2008
Reputation Points: 4 [?]
Q&As Helped to Solve: 9 [?]
Skill Endorsements: 0 [?]
 
0
 

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
varundeveloper
Newbie Poster
8 posts since Aug 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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
ingeva
Junior Poster
106 posts since Jul 2008
Reputation Points: 4 [?]
Q&As Helped to Solve: 9 [?]
Skill Endorsements: 0 [?]
 
0
 

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
varundeveloper
Newbie Poster
8 posts since Aug 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

yup....thanks

Member Avatar
ls233
Newbie Poster
1 post since Jan 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article