We build. You grow.
Get best community software hereStart a social network, a fan-site, an education project with oxwall - free opensource community software
Background image to scale | Forum
Taylor
Sep 28 '15
Does anyone know if there is a way to change the background image from the repeatable image to scale instead? I am using the Biohazard theme if that helps
Leader Kяuncн
Oct 2 '15
body, body.ow {
background-color: #0d1422;
background-image: url("images/whatever_bg_image.jpg");
background-repeat: no-repeat}
The Forum post is edited by Kяuncн Oct 2 '15
Taylor
Oct 2 '15
Thank you Krunch, I will give that a try. Is there a way to do the same thing with the header image?
body, body.ow {
background-color: #0d1422;
background-image: url("images/whatever_bg_image.jpg");
background-repeat: no-repeat}
Taylor
Oct 2 '15
Looks like this did not work. It made it so that the image did not repeat but i was still not able to scale
body, body.ow {
background-color: #0d1422;
background-image: url("images/whatever_bg_image.jpg");
background-repeat: no-repeat}
Taylor
Oct 3 '15
I mean I want the image to fit the whole screen without having it repeat. I want to use a single image for the background, not multiple small images repeated
Taylor
Oct 3 '15
Yes, that sounds like what I am looking for
So regardless of the image's actual dimensions, you want it to occupy 100% of the screen width and height, and be a watermark image, so it doesn't scroll with the page contents?
Leader
Michael Kearney
Oct 5 '15
meta content ---> jquery screen.width .... it's in control. lol
/home/oxwall/oxwall/ow_themes/simplicity/master_pages/html_document.html:
<meta name="viewport" content="width=1024px,initial-scale=1, maximum-scale=1, user-scalable=0">
<script type="text/javascript">
checkScreenSize = function(){
if ( screen.width < 1280 ){
console.log("Too small")
}else{
$(document).ready(function(){
$("#intro").css('background','url(/ow_static/themes/simplicity/para/big.jpg) 100% 0 no-repeat fixed'); }); }
}
checkScreenSize();
</script>
/home/oxwall/oxwall/ow_themes/simplicity/master_pages/html_document.html:
<meta name="viewport" content="width=1024px,initial-scale=1, maximum-scale=1, user-scalable=0">
<script type="text/javascript">
checkScreenSize = function(){
if ( screen.width < 1280 ){
console.log("Too small")
}else{
$(document).ready(function(){
$("#intro").css('background','url(/ow_static/themes/simplicity/para/big.jpg) 100% 0 no-repeat fixed'); }); }
}
checkScreenSize();
</script>
The Forum post is edited by Michael Kearney Oct 5 '15
Leader Darryl B
Oct 20 '15
Krunch is correct.
background-size:cover; will get the image to fill the entire page.
Leader Darryl B
Oct 20 '15
@ Chris_W. Yep. I've seen that over and over again. I'm getting to know css pretty good by playing around with it on my test site.
@Michael. Wish I could understand more about how js works. I've read about how handy it can be.
@Michael. Wish I could understand more about how js works. I've read about how handy it can be.
Taylor
Nov 21 '15
background-size:cover;
or
background-size:100% auto;
I tried background-size:cover; but it didn't work so I tried background-size:100%auto; and now when I try to go to my homepage I just get a plain white page with this message"Forbidden
You don't have permission to access /index.php on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request." Does anyone know how to fix this?
The Forum post is edited by Taylor Nov 21 '15
Leader Darryl B
Nov 21 '15
If you entered the "background:100% auto" as you typed it above "background: 100%auto", then that would be a css error, and the css would stop reading at that line. Be sure you are doing it like this " background:100% auto; " without the quotes of course. If you entered it correctly, you may have another issue going on. This would only affect the display of the background.
Taylor
Nov 22 '15
My bad, that was a typo. I just copy and pasted it onto the custom css page. Could this just be a server issue then?
Leader
Taylor
Nov 22 '15
Okay, I'll contact my host and find out whats up. Thank you for all of your help, I appreciate it.
