browser size and webpage size

Question

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 19-May-10 0:13am

NishaPai

Add a Solution

5 solutions

Solution 2

You can use the CSS property height.
Say,

CSS

height:100%

Posted 19-May-10 1:31am

Ankur^\m/

Solution 3

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?

Posted 19-May-10 2:10am

NishaPai

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

Solution 4

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>

Posted 19-May-10 3:07am

Narsimlu Keshagouni

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.

Solution 5

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.

Posted 20-May-10 1:31am

Narsimlu Keshagouni

Comments

NishaPai 26-May-10 4:49am

yes.. comment and uncomment can do the task..

Add a Solution

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

Narsimlu Keshagouni · Accepted Answer · 2010-05-19T01:17:00

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>

browser size and webpage size

5 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Solution 5

Add your solution here

Preview 0

browser size and webpage size

5 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Solution 5

Add your solution here

Preview 0

Existing Members

...or Join us