Click here to Skip to main content
16,016,501 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi all,

I'm developing a website in asp.net and need your help in its design.
Firstly, I have a background image for the page in masterpage file and the image gets repeated if I enlarge the browser. (just Like tile property in setting desktop background in our system) I want it to get stretched to fit the browser size.
Second, I want my web page to shrink or expand according to browser size.

can anyone help me in doing the above two.
Thanks in advance for your help
Posted

Sowmya,

Instead of the page backgroud, you can use the CSS styles - position to show the background to strech/fit to screen. Like
XML
<body bottommargin=0 topmargin=0 leftmargin=0 rightmargin=0>
<div style="position:absolute;left:0px;top:1px;width:100%;height:100%">
    <img src="background.jpg"  style="position:absolute;left:0;top:0;width:100%;height:100%;"/>
</div>
<div style="position:absolute;left:0;top:0;width:100%;height:100%;">
Your page content here.  This will be visible on top of the above image.
</div>

</body>
 
Share this answer
 
Comments
NishaPai 19-May-10 8:36am    
Hi Narsimlu,

Thanks for the code. It solved both the problems. I have used that code in master page but I could not able to add any controls on that page.
Where should I add that code and other controls?
You can use the CSS property height.
Say,
CSS
height:100%
 
Share this answer
 
Hi Narsimlu,

Thanks for the code. It solved both the problems. I have used that code in master page but I could not able to add any controls on that page.
Where should I add that code and other controls?
 
Share this answer
 
Comments
Ankur\m/ 20-May-10 7:52am    
Comments are the right way to discuss with the answerer. Don't post an answer for that as the answerer may not see it.
But if you add a comment to his/her answer he/she will be notified (of course if he/she has chosen to)
Ankur\m/ 20-May-10 7:53am    
Reason for my vote of 2
not an answer
Narsimlu Keshagouni 20-May-10 8:25am    
Ankur, thanks for the comments; I posted the answer in doubt, that the comments may not be sent as mail to sowmya, and it seems it is already 2days late for her to complete the task. Any way i will post comments next time.
NishaPai 26-May-10 0:32am    
Hi, Thanks for your help. I couldn't able to look into this as I was busy with another tight project. I'll come back to you if I find any difficulty. Thanks again
Sowmya,

Try putting your entire form in the second div tag -
XML
<body bottommargin=0 topmargin=0 leftmargin=0 rightmargin=0>
<div style="position:absolute;left:0px;top:1px;width:100%;height:100%">
    <img src="background.jpg"  style="position:absolute;left:0;top:0;width:100%;height:100%;"/>
</div>
<div style="position:absolute;left:0;top:0;width:100%;height:100%;">
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
</div>
</body>
 
Share this answer
 
Comments
NishaPai 20-May-10 5:14am    
I tried but still I can not put any other controls on that. I also tried putting all the controls first and then applying background image, in this case few controls won't apper on the screen.
Narsimlu Keshagouni 20-May-10 7:27am    
I think the first div is being selected when you want to add controls. Please comment first div completely each time when you want to edit page in visual studio and uncomment while deploying application.
I think the first div is being selected when you want to add controls. Please comment first div completely each time when you want to edit page in visual studio and uncomment while deploying application.
 
Share this answer
 
Comments
NishaPai 26-May-10 4:49am    
yes.. comment and uncomment can do the task..

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900