Advertisement:

Author Topic: Alternate background-position in <body>  (Read 372 times)

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 8,390
  • Riding the endless highway in the sky.
Alternate background-position in <body>
« on: July 02, 2018, 11:53:34 PM »
I've created an ad header for a forum running Curve, it's above the forum header.  Trying to code an alternate format for mobile, which requires stacking some elements in portrait view that are inline in landscape.   I've adjusted background-position in body css so top is at bottom of ad header and lines up normally with forum header -

Code: [Select]

body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
background-position: 0 128px;
font: 88%/140% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 0;
}


Ad header is 128px height.  This works fine in landscape view, but I need to expand the header to 300px height in portrait view, and this is causing problems with solid color background overlapping backdrop.png.  Is there any way to set an alternate background-position?  I can probably do it inline in index.template.php, but that seems very clunky. :P


Online GigaWatt

  • The Smiley Guy
  • Support Specialist
  • SMF Hero
  • *
  • Posts: 1,447
  • Gender: Male
    • Macedonian electronics forum
Re: Alternate background-position in <body>
« Reply #1 on: July 03, 2018, 06:28:21 AM »
Never thought portrait would become the "de facto" standard way people viewed web pages ::).
"This is really a generic concept about human thinking - when faced with large tasks we're naturally inclined to try to break them down into a bunch of smaller tasks that together make up the whole."

"A 500 error loosely translates to the webserver saying, "WTF?"..."

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 69,615
    • StoryBB/StoryBB on GitHub
Re: Alternate background-position in <body>
« Reply #2 on: July 03, 2018, 06:41:57 AM »
Surely you'd set it by @media queries to adjust based on the width of the viewport?
Don’t try to tell me that some power can corrupt a person. You haven’t had enough to know what it’s like.

No good deed goes unpunished / No act of charity goes unresented.

Online Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 57,345
  • Gender: Male
    • Kindred-999 on GitHub
Re: Alternate background-position in <body>
« Reply #3 on: July 03, 2018, 07:04:31 AM »
that would have been my suggestion.

using the @media tag and the max-width screen size to determine the proper layout is the best responsive determiner that I have found.
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline Arantor

  • Resident Overthinker
  • SMF Friend
  • SMF Legend
  • *
  • Posts: 69,615
    • StoryBB/StoryBB on GitHub
Re: Alternate background-position in <body>
« Reply #4 on: July 03, 2018, 08:34:22 AM »
For pure CSS, it's the *only* way to do it. Things get a little more interesting with JavaScript but still ultimately it's being defined based on the width of the viewport to decide what presentation should be used.
Don’t try to tell me that some power can corrupt a person. You haven’t had enough to know what it’s like.

No good deed goes unpunished / No act of charity goes unresented.

Offline Sir Osis of Liver

  • SMF Hero
  • ******
  • Posts: 8,390
  • Riding the endless highway in the sky.
Re: Alternate background-position in <body>
« Reply #5 on: July 03, 2018, 06:44:27 PM »
Ended up using this -

Code: [Select]

<script type=\'text/javascript\'>if (window.innerHeight > window.innerWidth) { document.getElementById(\'ad_header_l\').style.display = "none" } else { document.getElementById(\'ad_header_l\').style.display = "" }</script>

<script type=\'text/javascript\'>if (window.innerHeight > window.innerWidth) { document.getElementById(\'ad_header_p\').style.display = "" } else { document.getElementById(\'ad_header_p\').style.display = "none" }</script>


Two different ad_headers, displays correct one (hopefully) for detected orientation.  Seems to be working, so far.