I'm creating a theme for my job and i noticed that as i go further into the page the background image becomes larger and ofcourse loses the sharpness.
What could i do to remedy this?
body {
background: url(path of background image) no-repeat fixed 50% 50%;
background-size: cover;
position: relative;
}
it doesn't work for me. :/
body {background-image:url([[pix:theme|screenshot]]);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
this is my code for the image, but if i add what you offered it just disappears all together
What exactly do you mean by 'go further into the page'? Are you zooming in on the browser?
In which case that's probably down to the original resolution of your image - but the downside of using a higher resolution image is that it is larger in terms of memory and download speed in the first place. You need to find the appropriate balance for your site between resolution/size of image and ability to zoom in.
Richard
by going in further, what i mean is when i.e. from dashboard i go into a course, then i go in further to look up specific course info and so on, each next step enlarges the background
From dashboard to course, to a specific resource/activity in the course should be a different page and so should reapply the background image.
That sounds like there's some kind of issue with how those are displaying - some screenshots might help?
But also - I'm really not sure you need all those vendor prefixes any more - background-size is supported in all the recent versions of the main browsers http://caniuse.com/#search=background-size