Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Custom Background Image Size

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Does anyone have advice on what size a custom background image should be? What is best practice so that in a responsive template (I'm using Nebula) the background image looks nice whether displayed on computer, tablet or smartphone?
  • AquilinoArts's Avatar
  • AquilinoArts
  • LIfetime Developer - Big Bamboo
  • 286 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.
I'm afraid there isn't a set size really it depends on the subject matter, template and space to work with

The best images generally are more abstract pattern images. I tend to look at the quickstart image sizes and play around from there with the dimensions

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thank you for confirming this; this is what I am discovering. I find that if I place background images that have specific images/elements in them, they can be treated differently by different screen sizes. So I am recommending a different/more neutral background image to my client.

That being said, I noticed that screen size (smaller computer screen size width and tablets) make the contact button in the menu slide down to the "next row" –is this a problem I created by adding that line of custom css? (below)

}
#navwrap ul.nav > li > a, #navwrap ul.nav > li .separator {
padding: 0px 12px !important;
}

OR is this again an uncontrollable element due to screen size?

Always Appreciative,
Maria Lara
  • AquilinoArts's Avatar
  • AquilinoArts
  • LIfetime Developer - Big Bamboo
  • 286 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.
Generally with elements moving around in different screen widths its a case of creating media queries with targetted css inside them

So it could be

@media ( max-width: valuepx ) and/or a (min-wdith: valuepx) {
then the css { }
}

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
If you have a site and a width in mind I can steer you in the right direction

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Well, I'm a little out of my skin here. But, would you say that within in the template manager, under Layout, I should be able to fine-tune to accommodate smartphone and tablet,right? Is there something I am misunderstanding or is this not what this section of template manager is about. Thanks for the continued support, Paul.
~Maria Lara

;) Update: Now that I have had an opportunity to play in template manage/format, I can see that I cannot dictate the resizing of the menu/nav bar and its items. I can change how modules display (although I think I am not see adjustments made on smartphone because the cache isn't cleared).
So, I think I do need to look at the tablet in portrait display and how it knocks the contact in the nav bar down. The url is now live: www.secondgrowth.org –Hooray!
  • AquilinoArts's Avatar
  • AquilinoArts
  • LIfetime Developer - Big Bamboo
  • 286 posts
  • 4 Thanks
  • Karma: 2
Last Edit: 5 years 10 months ago by AquilinoArts.
The administrator has disabled public write access.
You can tune certain features of templates using the the layout tab but some elements as with the menu in the template either need adjusting via php or via css

Congratulations on the site :)

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thank you for the congrats; I couldn't have done it without the JB team.

I don't know enough about php - still green behind the ears. But, I am more comfortable with css.

In one of your above posts you wrote:

@media ( max-width: valuepx ) and/or a (min-wdith: valuepx) {
then the css { }
}

Even though I am comfortable with css, I look at this and think, okay is that that something like:

@media ( max-width: 1024px ) and/or a (min-wdith: 768px) {#navwrap ul.nav > li > a, #navwrap ul.nav > li .separator {
padding: 0px ??px !important;}
}

and where is @media? I don't see it in the template css.
How do you decide max and min? based on the size of say an iPad and/or android tablet (which apparently varies greatly)? And how do I know what to change the padding to (assuming this is what is supposed to happen).

Portrait 768×1024 (1536×2048-Retina) pixels
Landscape 1024×768 (2048×1536)

I pulled these iPad sizes off of:
www.vickiwenderlich.com/2012/07/iphone-ipad-basic-screen-component-dimensions-updated-for-retina/

As you can see, I'm wading into new water and am a bit lost-but not completely drowning.

Gratefully,
Maria Lara
  • AquilinoArts's Avatar
  • AquilinoArts
  • LIfetime Developer - Big Bamboo
  • 286 posts
  • 4 Thanks
  • Karma: 2
The administrator has disabled public write access.
Along the lines of

/* media query for device etc */

@media (min-width: 768px) and ( max-width: 1024px ) {

#navwrap ul.nav > li > a, #navwrap ul.nav > li .separator

{padding: 0px ??px !important;}

}

When using media queries for the first few times I'd make sure you layout the css quite carefully as it will seem a bit odd adding extra brackets
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
Last Edit: 5 years 10 months ago by manh.
The administrator has disabled public write access.
I'm not an ipad user (too poor) so not 100% sure this will apply but I use the chrome DevTools

With the DevTools open it will show the screensize in top right corner so when I resize the screen it gives me an idea of the breakpoint I need to target (the dimensions will resize as I drag the screen smaller)

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
With the screen a reduced size I will need adjust the values in the styles window so it displays ok in that sized window

- making sure to paste styling values to a simple text editor like note pad

That will give me the values I need for a media query

Cheers
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers