Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: Page BG image not scaling

Page BG image not scaling 31 Jul 2017 20:53 #44319

I've assigned a 2200px wide image as my page BG, and set page BG color to black. However, on phones, the image displays still (I'd expected it to fall back to the solid color by default). And it displays only a small portion - it isn't scaling as I would expect.

I'm hoping someone has an answer seeing as Ced is away.

www.baysauto.com/
Attachments:

Please Log in or Create an account to join the conversation.

A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!

Page BG image not scaling 31 Jul 2017 22:20 #44320

in the custom css for that box, do:
background-size:100% 100%;

Of course, thats IF you want it at that scale - some images look odd when the same one is used on a desktop and a mobile/tablet in portrait view due to it being 'squished'.
What you can also do is use separate images for smaller devices.

To do this:
In responsive design, in the custom CSS box for each resolution use the following code:
body{
background-image:url('../images/image1.jpg');
}
(of course replacing 'image1' with the name of the image(s) you use)
You then should use the custom images (under parameters>custom images) to include the new images in the template folder.

Please Log in or Create an account to join the conversation.

Last Edit: by Boradan.

Page BG image not scaling 31 Jul 2017 22:49 #44321

Thanks, Boradan, but neither seemed to have any effect on the site in mobile. I did make a new image for mobile (for the second alternative), but nothing happened. Same old, same old.

Please Log in or Create an account to join the conversation.

A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!
Last Edit: by trogladyte.

Page BG image not scaling 31 Jul 2017 23:44 #44322

site link?

Please Log in or Create an account to join the conversation.

Page BG image not scaling 31 Jul 2017 23:49 #44323

Please Log in or Create an account to join the conversation.

A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!

Page BG image not scaling 01 Aug 2017 00:11 #44324

Not going to be a hell of a lot that you can do with that image to be honest as far as rescaling goes due to the nature of it.
Have a look at the site here: ismysiteresponsive.com/ to see what I mean.
Removing the image altogether in smaller devices would be best:
Use this in the responsive layouts for the ones where is totally sucks:
body{
background-image: none;
}

Even the original image in desktop view (I am using 1920x1080) does not look great.
Personally, I would crop the image down to suit that resolution more (there is a lot of wasted space at the top of the image that could be cut out.)
I would also change it to 'fixed' instead of 'scroll' as currently, the ONLY reason there is a vertical scroll is to see the bottom of the image on the main site.
(I assume the reason for :
#left > div.inner {
    height: calc(100vh + 400px);
}
is to see the full picture?

What is the vertical menu extension you are using?

Please Log in or Create an account to join the conversation.

Last Edit: by Boradan.

Page BG image not scaling 01 Aug 2017 00:39 #44325

Thanks, Boradan. I added the none and that's stopped it displaying on mobile (seems droid Chrome suffers the same issue as Desktop Chrome - cache just won't let go - still showing it on my phone). Changed to fixed.

The vertical menu is the one from Offlajn.com offlajn.com/vertical-menu.html and it was them who said to add that code to make the left bar/menu reach to the bottom.

Please Log in or Create an account to join the conversation.

A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!

Page BG image not scaling 01 Aug 2017 01:03 #44326

chrome.google.com/webstore/detail/clear-...launcher-info-dialog
I use that in desktop to clear the cache when needed.
No idea about mobile version though

======================================
Cropping the picture JUST above the tallest guy's head would remove the necessity for that as its currently a bit too far.
I noticed that on the picture in mobiles, there is a black gradient bottom to it.
Maybe do that to the larger picture currently used in desktop mode (along with the top cropping).
Then in the Parameters > page set the following:
background: fixed
x:0
y:0
adjust: full width

That will allow the same image to scale for all viewports, and blend into the background color for mobiles/tablets

Please Log in or Create an account to join the conversation.

Last Edit: by Boradan.

Page BG image not scaling 01 Aug 2017 08:36 #44327

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 17671
  • Karma: 391
  • Thank you received: 2264
Hi
I'm on Holidays until the 21 august.

The questions posted during this period will receive no answer, so please be patient and wait before posting in the forum. Thank you
CEd

Please Log in or Create an account to join the conversation.

Joomlack Webmaster and Developer
  • Page:
  • 1
Time to create page: 0.354 seconds

Fast and powerful creation, customizable and responsive.

Read More

Qui est en ligne

We have 189 guests and no members online