Jump to content

Issues with the background picture being the same on everyone's computer

Angela75

By Angela75
in HTML/XHTML

 Share

Recommended Posts

Angela75 Newbie

Angela75

Posted
Posted

ok here is my problem I have been building this website from scratch and using the internet as my teacher. Well now I have ran into an issue with a background picture not looking the same on my husbands computer as it does on mine and a few other peoples. Looks prefect on ours but his looks horrible. The web site is overcomeaschrist.com.I have changed his resolution, re installed IE9, changed to Google chrome, I have spent hours changing code, adding code, trying this and that and nothing is working, and his is now showing the whole pic but it's not the size of the monitor, there is a black strip at the bottom of his page. I've been trying some jquery ideas, but don't really understand it to much. I have resized this pic 4 or 5 times, but will do it again and anything else i need to do. Please help I am completely out of ideas, also please explain in layman terms since I don't know all the high end computer language. Thank you ahead of time. Oh I also only need this background picture on this single page.

Link to comment
Share on other sites
Mudsaf Member

Mudsaf

Posted
Posted (edited)

Depends on picture quality and desktop resolution. Your laptop might have like 7xx-13xx resolution and tower pc for example 1920x1080 so the image size does't fill the 1920x1080 resolution. You can apply this to css so image fills whole screen

html {background: url(http://i1254.photobucket.com/albums/hh616/Rachelle_Robertson/b08bcbbf.jpg) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; }

Edited by Mudsaf
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

could use position: fixed works for older browsers; your code is old school with regards to <font> tag usage. use margins instead of line breaks, and you seem to be missing closing html and body tags. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Over Come As Christ</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="js/jquery.ez-bg-resize.js" type="text/javascript" charset="utf-8">/*$(document).ready(function() {$("body").ezBgResize({  img : "http://i1254.photobucket.com/albums/hh616/Rachelle_Robertson/b08bcbbf.jpg", // Relative path example.  You could also use an absolute url (http://...).  opacity : 1, // Opacity. 1 = 100%.  This is optional.  center  : true // Boolean (true or false). This is optional. Default is true.});});*/</script><style type="text/css">body {background-color:black;/*background-image:url('http://i1254.photobucket.com/albums/hh616/Rachelle_Robertson/b08bcbbf.jpg');background-size:1595px 830px;background-repeat:no-repeat;*/min-height:800px;}a:link {color:#F8F8FF;}	  /* unvisited link */a:visited {color:#F8F8FF;}  /* visited link */a:hover {color:#F8F8FF;}  /* mouse over link */a:active {color:#F8F8FF;}  /* selected link */ .right {    font-family: "Script MT Bold";    left: 0;    margin-left: 163px;    margin-top: 318px;    position: absolute;    text-align: center;    top: 0;}.p1 {    color: #FFFFFF;    font-size: 18px;    line-height: 22px;    margin: 0;}.a1 {    font-size: 48px;}#BG {position: fixed; top: 0pt; width: 100%; height: 100%; left: 0pt; bottom: 0pt; right: 0pt; z-index: 0; min-height: 800px;}</style></head><body><div id="wrapper"><img src="http://i1254.photobucket.com/albums/hh616/Rachelle_Robertson/b08bcbbf.jpg" id="BG" alt="" /><div class="right"><a href="home.html" class="a1">Enter</a><p class="p1">Art Work Provided By <br />Jesus Christ Our Lord and Saviour<br />through our brother:<br />www.thomaswziffer.com</p></div></div></body></html>

  • Like 1
Link to comment
Share on other sites
Angela75 Newbie

Angela75

Posted
  • Author
Posted

wow thanks for the timely response. I copy and pasted your coding and no it still made no difference to the picture on the smaller monitor. I would like it to fit without any scroll bars. Looks awesome, beyond awesome on my laptop and on my husbands new monitor, Thank you so much. I now know which forum to come to when I need a question answered. You have a blessed day.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Removed min height and few other changes, works in all now 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Over Come As Christ</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="js/jquery.ez-bg-resize.js" type="text/javascript" charset="utf-8">/*$(document).ready(function() {$("body").ezBgResize({  img : "http://i1254.photobucket.com/albums/hh616/Rachelle_Robertson/b08bcbbf.jpg", // Relative path example.  You could also use an absolute url (http://...).  opacity : 1, // Opacity. 1 = 100%.  This is optional.  center  : true // Boolean (true or false). This is optional. Default is true.});});*/</script><style type="text/css">html, body {height:100%;}body {background-color:black;/*background-image:url('http://i1254.photobucket.com/albums/hh616/Rachelle_Robertson/b08bcbbf.jpg');background-size:1595px 830px;background-repeat:no-repeat;min-height:800px;*/margin:0;}a:link {color:#F8F8FF;}	  /* unvisited link */a:visited {color:#F8F8FF;}  /* visited link */a:hover {color:#F8F8FF;}  /* mouse over link */a:active {color:#F8F8FF;}  /* selected link */.right {    font-family: "Script MT Bold";       top: 16%;margin-left: 163px;    text-align: center;position:absolute;}.p1 {    color: #FFFFFF;    font-size: 18px;    line-height: 22px;    margin: 0;}.a1 {    font-size: 48px;}#wrapper { height:100%;}#BG { position: fixed; top: 0;left: 0; bottom: 0; right: 0; z-index: 0;width: 100%; height: 100%;}</style></head><body><div id="wrapper"><img src="http://i1254.photobucket.com/albums/hh616/Rachelle_Robertson/b08bcbbf.jpg" id="BG" alt="" /><div class="right"><a href="home.html" class="a1">Enter</a><p class="p1">Art Work Provided By <br />Jesus Christ Our Lord and Saviour<br />through our brother:<br />www.thomaswziffer.com</p></div></div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...