Background image will NOT zoom out

griffinmalone2 · November 5, 2016, 1:36am

I have one part of a page with the HTML of:

  <div id="w3cover">
    <img src="w3-images/w3cover.png" alt="">
  </div>

And the CSS:

#w3cover {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}
#w3cover img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

It was working normally and perfectly and and now for some reason It is backed to be zoomed in. not sure what I did. I have done research and tried other methods but stills stumped.

Thanks anyone for the help.

ronpat · November 5, 2016, 7:40am

Hi, griffinmalone2.

Just as before, we would prefer to see a “working page” complete with the information in the <head> section of the page. In these cases, that matters.

Likewise, the context in which the image resides could be significant, too.

So, in spite of your wish to be “conservative” in your posting, a bit more info is needed, including the devices in which you have tested and seen the trouble.

Screen shots sometimes help, too.

Can you post a link to the site?

<ot>

Pretend you are one of us strangers and someone just posted that trouble for you to solve. Would it give enough information for you to begin troubleshooting?

</ot>

SamA74 · November 5, 2016, 10:01am

If this is supposed to be a background image, would it not be better to apply it as a background to an element, rather than an <img>?

griffinmalone2 · November 5, 2016, 7:23pm

Alright!

Full HTML:

<html>
	<head>
		<title> - Websites - </title>
        <link rel="stylesheet" type="text/css" href="style.css">
	</head>

<body>




	<div id="w3cover">
    <img src="w3-images/w3cover.png" alt="">
  </div>


  <div class="w3logo">
    <img src="w3-images/avidalogo1.png">
  </div>



  <div class="dropdownw3">
		<span>Home</span>
    <div class="dropdown-contentw3">
      <p> Portfolio One </p>
      <p> Portfolio Two </p>
    </div>
  </div>


    <div class="dropdownw3a">
      <span>Contact</span>
      <div class="dropdown-contentw3a">
        <p>Portfolio One</p>
      </div>
    </div>

    <div class="dropdownw3b">
      <span>Products & Services</span>
      <div class="dropdown-contentw3b">
        <p>Rates</p>
        <p>Custom Work</p>

      </div>
    </div>


<div class="w3line">
  <img src="w3-images/w3line.png">
</div>

<div class="w3linea">
  <img src="w3-images/w3line.png">
</div>

<div class="w3lineb">
  <img src="w3-images/w3line.png">
</div>
<div class="w3linec">
  <img src="w3-images/w3line.png">
</div>
<div class="w3lined">
  <img src="w3-images/w3line.png">
</div>



</body>
</html>

Full CSS:

.w3-background-image{
  width: 100%;
  height: 100%;

}

#w3cover {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}
#w3cover img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

.w3logo{
  position: fixed;
  margin-left: 100px;
  margin-top: 100px;
}


@font-face { font-family: Delicious; src: url('fonts/ffl.ttf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('fonts/ffl.ttf');}


.dropdownw3 {
    height: 300px;
    position: relative;
    display: inline-block;
    margin-left: 2500px;
    margin-top: 100px;
    font-size: 75px;
    font-family: Delicious;

}

.dropdown-contentw3 {
  display: none;
  position: absolute;
  background-color: rgba(126, 138, 138,0.5);
  min-width: 500px;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  margin-left: -130px;
  font-size: 65px;
  margin-top: 30px;


}


.dropdownw3:hover .dropdown-contentw3 {
    display: block;
}

.w3line {
  position: fixed;
  margin-left: 2505px;
  margin-top: -430px;

}

.dropdownw3a {
    position: relative;
    display: inline-block;
    margin-left: 3000px;
    margin-top: -300px;
    font-size: 75px;
    font-family: Delicious;
    font-weight: bold;
    height: 500px;

}

.dropdown-contentw3a {
  display: none;
  position: absolute;
  background-color: rgba(126, 138, 138,0.6);
  min-width: 500px;
  min-height: 30px;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  margin-left: -50px;
  font-size: 65px;
  margin-top: 30px;

}

.dropdownw3a:hover .dropdown-contentw3a {
    display: block;
}
.w3linea {
  position: fixed;
  margin-left: 3050px;
  margin-top:-430px;



}



.dropdownw3b {
    position: relative;
    display: inline-block;
    margin-left: 3500px;
    margin-top: -500px;
    font-size: 75px;
    font-family: Delicious;
    font-weight: bold;
    height: 500px;

}

.dropdown-contentw3b {
  text-align: center;
  display: none;
  position: absolute;
  background-color: rgba(126, 138, 138,0.6);
  min-width: 1000px;
  min-height: 30px;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  margin-left: -50px;
  font-size: 65px;
  margin-top: 30px;

}

.dropdownw3b:hover .dropdown-contentw3b {
    display: block;
}
.w3lineb {
  position: fixed;
  margin-left: 3565px;
  margin-top: -430px;
}

.w3linec {
  position: fixed;
  margin-left: 3822px;
  margin-top: -430px;
}

.w3lined {
  position: fixed;
  margin-left: 4080px;
  margin-top: -430px;
}

My website is local at the moment.

griffinmalone2 · November 5, 2016, 7:24pm

I believe i tried this a couple times. Is that like defining a body or a div and then in style using 'background, background-size… etc? Or is this something else.

SamA74 · November 5, 2016, 7:39pm

If that last image is what you are after, then I’m sure it should be a background, possibly applied to the body.

body {
    background: url(w3-images/w3cover.png) center no-repeat;
    background-size: cover;
}

Though a lot of your other css confuses me. A lot of unusually large “magic numbers”.

griffinmalone2 · November 5, 2016, 7:41pm

This particular page is within a site with numerous pages. So the body would need to have a class. Does it work to define that body as “w3body” and then in css have that same code but with .w3body, rather than “body”?

SamA74 · November 5, 2016, 7:45pm

Yes, you can put a class on the body if needed.

<aside class="off-topic">I bet that background image is a quite large file.</aside>

griffinmalone2 · November 5, 2016, 7:46pm

Okay… I was just about to post with my new discovery when I clicked on my website through another HTML and it loaded it perfectly… The difference:

file:///Users/griffinmalone/Desktop/—/Websites/Personal%20Website/index.html/website3.html

file:///Users/griffinmalone/Desktop/—/Websites/Personal%20Website/index.html/website3.html#

One had a hashtag. Why would this screw up ALL my proportions?

griffinmalone2 · November 14, 2016, 7:30pm

Hey, I posted here a couple weeks ago with this issue: my page loads zoomed in and wont ‘fit to page.’ When I load the webpage locally it runs perfectly when I run it from my actual website: http://griffinmalone.com/index.html/website3.html it runs weirdly zoomed in. There obviously is NO difference in the code between the two so what makes one load different than the other?

DaveMaxwell · November 14, 2016, 7:39pm

sigh Since @SamA74 closed the other one, I’ll post it here…

When you run a menu with a margin-left of 2500 and a font-size of 75px, you’re gonna get scroll bars… all of the css in that style sheet (http://yoursitename.com/index.html/style.css) is to that scale.

I would guess your local style sheet and the one on the website do not match…

SamA74 · November 14, 2016, 7:43pm

There is nothing weird about it, that image is 5472 pixels wide (way bigger than most monitors) with nothing to tell it to scale down to a sensible size.

You have not implemented the suggestions made earlier:-

I’m having a hard time making sense of a lot of your css. It appears to be coded to work on “super-size” monitors, or is it supposed to be a horizontal site?
Before even attampting to make this responsive, you will need the viewport meta tag adding to the head.

<meta name=viewport content="width=device-width, initial-scale=1">

It is, 9.3MB! A real hog on the page. Reduce the resolution to something sensible and save to a more appropriate format for a photo such as jpeg.

Seemed like a duplicate topic to me, so merged.

griffinmalone2 · November 14, 2016, 8:03pm

Thank you. Added meta. The CSS is (was now) exactly the same. Having ahard time understanding why it is not good to put menu left 2500 pixels… Arent I just positioning it over on the screen 2500 pixels?

I could not find a working method to add it as a background and the other way was working.

The site is not supposed to be horizantal, what in the CSS makes you think that? I am mostly confused because it works perfectly on my actual computer than doesnt on something else- making it difficult to find the problem.

SamA74 · November 14, 2016, 8:19pm

So what do you expect happens if you monitor is only 1920 pixels wide? Or a phone at 320px wide?
Where is the menu?

The width of it.

What size monitor are you using?

DaveMaxwell · November 14, 2016, 8:35pm

Because unless you have a 4K monitor, MOST people have don’t have resolutions that high My laptop runs (in dock) at resolution at 1920 x 1200, and I’m pretty sure my desktop is something close to that. So, since 2500 is greater than 1900, you’ll get a scrollbar - and that’s if I have my browser window maximized (which is a rarity). That’s the same reason the font-size looks so ridiculous - 75px is almost 10% of my browsers maximized usable screen height (I get 1080px maximized with the tabs, address bar and task bar).

Hard coding pixels for placement and font-size is a wholesale bad idea. Using percentages (or em or rem or vh or vw or vmin or vmax) is a better way to approach it…

griffinmalone2 · November 14, 2016, 9:19pm

Okay, I understand. Got a lot of reworking to do then.

So If I understand what I should be doing, redoing most of my pixel dimensions and replacing them with percentages.
As for the background, again this is what I currently have:

	<div id="w3cover">
    <img src="w3-images/w3cover.png" alt="">
  </div>

#w3cover {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}
#w3cover img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

When I attempted to make it part of the background class it would not work. Tried a couple different ways.

I assumed this would work:

<body class="w3body">

.w3body {
  background-image: image("w3-images/w3cover.png");
}

But it does not even load the image.

Thank you so much for all the help, I really appreciate it.

griffinmalone2 · November 14, 2016, 9:20pm

Gotcha! Thank you.

SamA74 · November 14, 2016, 11:58pm

.w3body {
    background: url(w3-images/w3cover.png) center no-repeat; /* url not image */ 
    background-size: cover; /* make the image fill the container */
}

TechnoBear · November 14, 2016, 11:59pm

You might find it works better if you use the correct syntax.

background-image: url(path-to-image)

John_Betong · November 15, 2016, 12:51am

backgound-image:url is confusing because the image is:

relative to containing CSS file
“file:/absolute path/Image-name.png” // jpg, gif, etc
URL of image

This thread may be useful.