0

Ok I am building my schools Theatre website this year and for some reason whenever i try to move a certain block i end up just screwing up the whole picture, Here is the code.

<!DOCTYPE html>
<html>
<style>
    body {
        background-image:url('file:///Users/dahank/Desktop/Theatre%20Folder.html/Curtains1.jpg');
        background-repeat:no-repeat;
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        background-size: contain;
        position: scroll;
    }
    #info1 {
        font-family: arial;
        text-align: center;
        color: #FFDA00;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    #Info {
        width: 400px;
        height: 50px;
        background-color: black;
        border: 2px solid #FFDA00;
        border-radius: 20px;
        margin-left: 490px;
        margin-top: -700px;
    }
    #Main {
        background-color: black;
        border: 2px solid #FFDA00;
        margin-top: 50px;
        margin-left: 525px;
        margin-right: 500px;
        margin-bottom: 700px;
        border-radius: 20px;
    }
    #title {
        font-family: arial;
        text-align: center;
        color: #FFDA00;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: 10px;

    }
</style>
<head>
    <title>Pratt High Theatre</title>
</head>
<body>
    <div id="Main">
        <h1 id="title">Pratt High Theatre</h1>
    </div>
    <div id="Info">
        <p id="info1">|    Home   |   About Us   |   Productions   |   Crew   |</p>
    </div>
</body>
</html>

and here is a picture of what happened whenever i put this into a webpage. http://imgur.com/hhFxEqC
Please Help!

3
Contributors
4
Replies
31
Views
3 Years
Discussion Span
Last Post by JorgeM
0

I m not sure what you want exactly but if you want your image to fill the screen then try this on LINE 11

 background-size:stretch;
0

Even if you strech the picture, it may be too fuzy and not be very appealing.

for some reason whenever i try to move a certain block i end up just screwing up the whole picture

What do you mean by that statement?

0

Ok Whenever I do use the Stretch command it ends up putting the middle of the curtain in the middle of the screen, and the block that i speak of is the "Home | About Us" block whenever i tried changing the margin of it it always made the white box aruond the picture become dominate and stretchd it to the whole skin.

1

Do you have this site online?....it would be easier to take a look and use browser tools to see what's happening.

or maybe use jsfiddle?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.