Databases
StackOverflow2013
Postsdbo
POConnecting repeatable and non-repeatble backgrounds without a seam
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POConnecting repeatable and non-repeatble backgrounds without a seam
    primarykey
    data
    text
    <p>I have a 700x300 background repeating seamlessly inside of the main content-div. Now I'd like to attach a div at the bottom of the content-div, containing a different background image that isn't repeatable, connecting seamlessly with the repeatable background above it. Essentially, the non-repeatable image will look like the end piece of the repeatable image.</p> <p>Due to the nature of the pattern, unless the full 300px height of the background image is visible in the last repeat of the content-div's backround, the background in the div below won't seamlessly connect. Basically, I need the content div's height to be a multiple of 300px under all circumstances. What's a good approach to this sort of problem?</p> <p>I've tried resizing the content-div on loading the page, but this only works as long as the content div doesn't contain any resizing, dynamic content, which is not my case:</p> <pre><code>function adjustContentHeight() { // Setting content div's height to nearest upper multiple of column backgrounds height, // forcing it not to be cut-off when repeated. var contentBgHeight = 300; var contentHeight = $("#content").height(); var adjustedHeight = Math.ceil(contentHeight / contentBgHeight); $("#content").height(adjustedHeight * contentBgHeight); } $(document).ready(adjustContentHeight); </code></pre> <p>What I'm looking for there is a way to respond to a div resizing event, but there <a href="https://stackoverflow.com/questions/229010/jquery-resize-not-working-at-firefox-chrome-and-safari">doesn't seem to be such a thing</a>. Also, please assume I have no access to the JS controlling the resizing of content in the content-div, though this is potentially a way of solving the problem.</p> <p>Another potential solution I was thinking off was to offset the background image in the bottom div by a certain amount depending on the height of the content-div. Again, the missing piece seems to be the ability to respond to a resize event.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USStiggler
    plurals
    1. PL
      singulars
      1. LTLinked
    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. POConnecting repeatable and non-repeatble backgrounds without a seam
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POConnecting repeatable and non-repeatble backgrounds without a seam
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POConnecting repeatable and non-repeatble backgrounds without a seam
      1. This table or related slice is empty.
      1. VTUpMod
    1. COSimply aligning the background image to the main content-`div`'s bottom (instead of its top) is not an option?
      singulars
      1. POConnecting repeatable and non-repeatble backgrounds without a seam
      1. USPekka 웃
    2. COIt would be, but I intend to do the same thing at the top with a top div. I left that part out in hopes of making the question easier to understand.
      singulars
      1. POConnecting repeatable and non-repeatble backgrounds without a seam
      1. USStiggler
 

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