News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Alternate background-position in <body>

Started by Sir Osis of Liver, July 02, 2018, 11:53:34 PM

Previous topic - Next topic
Print
Go Down Pages1
User actions

Sir Osis of Liver

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

Ashes and diamonds, foe and friend,
 we were all equal in the end.
                                     - R. Waters

GigaWatt

#1
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?"..."

Arantor

#2
July 03, 2018, 06:41:57 AM
Surely you'd set it by @media queries to adjust based on the width of the viewport?

Kindred

#3
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.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Arantor

#4
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.

Sir Osis of Liver

#5
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.
Ashes and diamonds, foe and friend,
 we were all equal in the end.
                                     - R. Waters
Print
Go Up Pages1
User actions
Advertisement: