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

Dani AI

Generated

Quick diagnosis for : the layout is fragile because elements are being positioned with large fixed offsets instead of a stable container/flow. That makes small tweaks push other boxes around and can make the background look like it's been "stretched" or replaced. 's idea to stretch the image can fix filling the screen but usually degrades image quality; was right to ask for a live URL so you can inspect computed styles — browser devtools will show which rules are winning and which properties are invalid.

A more robust approach is to apply the curtain image to a single wrapper that fills the viewport, then overlay your title and nav inside that wrapper using either absolute centering or flexbox. This keeps the background independent of the content flow and avoids negative margins and huge pixel offsets. Example structure and styles (change filenames and colors to match the site):

<!-- HTML -->
<div class="stage">
  <h1 class="title">Pratt High Theatre</h1>
  <nav class="site-nav">Home | About | Productions | Crew</nav>
</div>

<!-- CSS -->
.stage {
  min-height: 100vh;
  background: url('images/curtains.jpg') center / cover no-repeat;
  position: relative;
}
.title {
  max-width: 700px;
  margin: 40px auto 0;
  padding: 10px;
  text-align: center;
  color: #FFD700;
  background: rgba(0,0,0,0.75);
  border-radius: 20px;
}
.site-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 40px;
  padding: 8px 16px;
  background: rgba(0,0,0,0.6);
  border-radius: 20px;
  border: 2px solid #FFD700;
}

Quick troubleshooting checklist: use devtools to inspect computed styles; avoid local file URLs for images when testing online; remove invalid CSS rules and large negative margins; prefer percent/auto centering or transform centering; add z-index when overlays disappear behind the background. For details on positioning and background shorthand, the MDN docs are a reliable reference: position property and background shorthand.

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.