Member Avatar for Nvsp

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
  • 121 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Recommended Answers

All 4 Replies

Member Avatar for castajiz_2

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;
Member Avatar for JorgeM

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?

Member Avatar for Nvsp

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.

Member Avatar for JorgeM

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?

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.