0

I have a background image set. When I look on a mobile device the background image is different sizes on different pages even though they are all linked to the same stylesheet with this code

Site is 'treyscode.com' you can go to the different pages and see the size difference. Page is still not finished so don't give me too hard of a time :)

'''

body {
  background: url(../image/blackhole.jpg);
  background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      height:100%;
      width:100%;
}

'''

Why would different pages show the background image as a different size?

Roughcaster
  • 55
  • 6
  • try to open that website on different system and different browser – SalunkeAkash Nov 19 '19 at 04:54
  • Same thing. It is the home page where it is much larger than the other pages. the others are still different sizes but the home page is the most drastic – Roughcaster Nov 19 '19 at 04:58
  • This is how `background-size:cover` works it fit its parent height width you can set as `background-size:contain` to make that image same on all size of screen. – Awais Nov 19 '19 at 06:09

1 Answers1

1

Actually it depends upon your content of the webpage.As you have set the background-repeat property to no-repeat so it makes you think that it's of different size. In actual the image is constantly sticked and it's of same size on every page.

If you'll remove the above background-repeat property then you can see the difference which i'm talking about.

Khalid Khan
  • 3,017
  • 1
  • 11
  • 27
  • I removed the background repeat but it still shows it being stretched. What is another solution so that they all show the same size? I want the image to be small and clear like on the other pages – Roughcaster Nov 19 '19 at 05:55
  • Remove the background-attachment:fixed then you can understand. what i'm trying to say – Khalid Khan Nov 19 '19 at 05:57
  • Your image is of same size but you are feeling the difference because of the more content on your home scrreen – Khalid Khan Nov 19 '19 at 05:58
  • Oh okay I get what you mean. What would be the best way to go about setting a background as an image? Or would you recommend not doing that for stuff like this? Since I set the body to that image – Roughcaster Nov 19 '19 at 06:34
  • Actually what you have done is the default behaviour of fixed image. and it's done like this only. And it's depends upon your need whether you want to have an image as background or not. – Khalid Khan Nov 19 '19 at 06:37
  • If I only want it for the top portion of the page would i jus put it in a div and set the height or how could I limit it as the body image? Thanks for all the help so far by the way! – Roughcaster Nov 19 '19 at 06:38
  • Yes that'd would be good idea. And if you want parallex kind of effect then you can see this once https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm . and it's my pleasure to help you – Khalid Khan Nov 19 '19 at 06:40
  • You can find code here for something similar what you are looking for. https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax – Khalid Khan Nov 19 '19 at 06:42
  • Yeah I may try to implement that, It looks something like what I want to do. While I am here do you have any tips for speeding up loading times on my page? All the images are low hundreds kb but it still seems slighty slow – Roughcaster Nov 19 '19 at 06:43
  • You can lazy load images and videos on your web page to improve the speed.you can also defer load the javascripts to load your visible content more faster. Here's one article on lazy load https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video – Khalid Khan Nov 19 '19 at 06:45
  • One more thing, on my laptop the image stays put and the elements float over the image but on my phone the image scrolls as well? Why would that be – Roughcaster Nov 19 '19 at 06:45
  • Actually. In mobile phone bakground-attachment property is disabled by default that's why you are not able to see the effects on mobile. – Khalid Khan Nov 19 '19 at 06:49
  • Anyway to enable that or is it just not available for mobile phones – Roughcaster Nov 19 '19 at 06:50
  • This is kind of workaround for it https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios – Khalid Khan Nov 19 '19 at 06:50
  • Yes ! I suppose – Khalid Khan Nov 19 '19 at 06:51
  • Okay, awesome! Thanks a lot again. – Roughcaster Nov 19 '19 at 06:52
  • Anytime. And I'm glad that I helped you – Khalid Khan Nov 19 '19 at 06:54