Databases
StackOverflow2013
Postsdbo
POCSS3 - (background-size: auto 100%;) - unexpected behavior
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS3 - (background-size: auto 100%;) - unexpected behavior
    primarykey
    data
    text
    <p>I currently have the following CSS (called splash.css):</p> <pre><code>html { background:url(splash.jpg) center no-repeat; background-size:auto 100%; } </code></pre> <p>And the following HTML:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt; &lt;TITLE&gt;Test&lt;/TITLE&gt; &lt;link href="splash.css" rel="stylesheet" type="text/css" media="screen" /&gt; &lt;/HEAD&gt; &lt;BODY&gt; &lt;/BODY&gt; &lt;/HTML&gt; </code></pre> <p>I'm trying to get the background image called splash.jpg to always have the same height as the browser window, and to resize it (keeping its aspect ratio) and allow some of the width to remain outside the browser window. In addition, the background must be centered about the browser window.</p> <p>Currently I would expect my CSS to do exactly what it's supposed to do. I've set the background to be horizontally and vertically aligned to the center, and I've set it to the image it's supposed to be. I've also set the background-size to auto 100% - which, according to <a href="https://developer.mozilla.org/en/CSS/background-size" rel="nofollow">Mozilla Developer Network</a>, resizes the image exactly like I want it to be resized.</p> <blockquote> <p>If the background-size has one auto component and one non-auto component: If the image has an intrinsic proportion, then render it using the specified dimension, and compute the other dimension from the specified dimension and the intrinsic proportion. If the image has no intrinsic proportion, use the specified dimension for that dimension. For the other dimension, use the image's corresponding intrinsic dimension if there is one. If there is no such intrinsic dimension, use the corresponding dimension of the background positioning area.</p> </blockquote> <p>The problem I am facing is that the height of this huge, 1920x1080 image, appears to be around only 50px when I open the HTML in a browser window. The width also appears to be in the right ratio to the height. </p> <p>At first, I felt it might be some sort of browser-dependent bug - but the page appears pretty much exactly the same in both Chrome and Firefox!</p> <p>Note - Any other SIMPLE solutions are welcome. I don't want this behavior to be Javascript dependent - but I don't mind the solution working only in the latest versions of FF/Chrome.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USsaluce
    1. USShariq
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS3 - (background-size: auto 100%;) - unexpected behavior
      1. This table or related slice is empty.
      1. VTUpMod
    1. COif you add more content to the page the background will appear too.
      singulars
      1. POCSS3 - (background-size: auto 100%;) - unexpected behavior
      1. USmatpol
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload