It's in the home page stylesheet:
body {
background: url(img/bulb.jpg) no-repeat center center;
background-attachment: fixed;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: none;
}
Background Image Problems on PHP Site
I suspected you would have trouble finding it. I use a tool called Firebug, its an addon for the Firefox web browser. It allowed me to look at all the CSS that is being applied to the background image on the "body" tag.
You had mentioned you were using a template, and I see this fairly often with templates where the CSS for a give tag is strewn across several files and sometimes the files are dynamically generated. This makes fixing CSS bugs a nightmare.
In your case the file you're looking for is going to be hard to pin down, even if you do find it I would guessing that php is generating the CSS in that file dynamically. Or it is even possible that the CSS is in a database table.
When I did a "View Source", in the web browser, the following is the first 28 lines of the output html in index.php. And by output I mean its likely most of these line are tucked away amongst hundreds of line of php and possibly across multiple files.
<html>
<head>
<!-- <base href="http://www.businesspower.uk.com/" /> -->
<link href="ror.xml" type="application/rss+xml" rel="alternate" title="RSS Sitemap" />
<link rel="Stylesheet" href="styles/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="styles/print.css" type="text/css" media="print" />
<link rel="SHORTCUT ICON" href="favicon.gif" />
<meta name="author" content="Foundry Labs" />
<meta name="robots" content="index,follow" />
<!--[if IE]><link rel="stylesheet" href="styles/ie.css" type="text/css" media="screen, projection" /><![endif]-->
<style type="text/css">
body {
background: url(img/bulb.jpg) no-repeat center center;
background-attachment: fixed;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: none;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: red;
}
</style>
The first line inside the "body" element (which is inside the style tag) shows the "background" as having a positioning of "center center". That is what needs to change but I have no idea where to tell you to look to change it. Windows has a file search tool it can find text in a document (most IDE's and editors have one as well). So copy that entire "background" line and see if it is in a file somewhere. You may need to break it down even more if it doesn't turn up as each part of the line may be separated across several lines of php.
Next, on the mater of an ideal size there is really is none. If you had 100 visitors to your site they all could be seeing your site differently (guess some could even be blind). Generally large images (ie. full page images) can take too long load so avoid them for background images. Looking at your background image while very nicely made (wish I was that skilled) it is poorly suited for website use. I would explain how I would have handled your background but its a very lengthy and complex explanation that starts with the image being done differently and then goes into adding 2 gradient backgrounds and 2 additional div tags wrapping all the site content.
Here's a quick question that will likely generate several thoughts that will hopefully help you. Right now most the image is hidden by content, scrolled out of view, or positioned off the page. Why have the background that big if you're just going to hid it all from the visitor???
EDIT: guess I shouldn't check email and then grab a bite to eat in the middle of reply, someone will beat me to the punch 
Krik;10994412 wrote:EDIT: guess I shouldn't check email and then grab a bite to eat in the middle of reply, someone will beat me to the punch
Although I saved myself time by not writing how I found it (which was to use Firebug: turn on the HTML panel, select the <body> tag, and check the style rules in the tab on the right); and I didn't make any suggestions about how to look for the source code responsible....
Morning.. thank you both for your replies, so just to confirm, I need to change it to this?:
body {
background: url(img/bulb.jpg) no-repeat left top;
background-attachment: fixed;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: none;
}
Im thinking of changing all the image sizes to 1567 x 1043, that size seems to have less problems??
If the image is properly aligned, you can make it any size you wish, and it will still look the same in all browsers when they are first loading your page (except that varying big parts of it will be outside the viewport).
The size issue should be dealt with in regard to what Krik wrote, mainly
It's too big - we're talking file size, not image dimensions
It contains data which is never seen - 80% of it can never be seen by the user.
Morning,
I found the stylesheet and changed the code to "left top" however when I viewed the site it had kicked out the image size and position which made the background image look terrible.
Is there anyway I can install a plugin so the image will automatically increase and decrease dependent on the users system?? Or is there another soloution ???
Thanks
Chris M
murphych;10994585 wrote:Is there anyway I can install a plugin so the image will automatically increase and decrease dependent on the users system??
I have no idea... Have you tried google???
murphych;10994585 wrote:Or is there another soloution ???
The first one that comes to mind is,,, if needed,,, fixing your image so that it can be aligned top left,, and then fix your CSS so that the background image is aligned top left...
murphych;10994585 wrote:when I viewed the site it had kicked out the image size and position
You site had kicked out image size and position??? Would you care to explain what this means???
murphych;10994585 wrote:I found the stylesheet and changed the code to "left top"
Is it possible to reach your current code somewhere,,, so that it's possible to inspect the page with firebug???
Hi ya..
The image became enlarged or smaller depending in the page and does nt look right against the text.
I have converted www.businesspower.uk.com to "Left Top" so you can see what I mean.
Re; The first one that comes to mind is,,, if needed,,, fixing your image so that it can be aligned top left,, and then fix your CSS so that the background image is aligned top left...
I think that may be the soloution. Can you advise what I need to do??
Thanks
Chris M
The image doesn't change size, just placement.
How is it supposed to look "against the text"?
Have you tried viewing the page in firefox with the firebug plugin and adding a new attribute of visibility: hidden to the body css rule before you go on and change between center center and top left? Well, obviously you can do this in your source files as well, but being able to check things like this wihtout page reloads and source file changes is often easier. Either way, you should see that nothing but the image placement changes.
johanafm;10994617 wrote:THave you tried viewing the page in firefox with the firebug plugin and adding a new attribute of visibility: hidden to the body css rule before you go on and change between center center and top left? Well, obviously you can do this in your source files as well, but being able to check things like this wihtout page reloads and source file changes is often easier. Either way, you should see that nothing but the image placement changes.
No I havent.. can you give me a brief explanantion on what I need to do??
Thanks
Chris M
Get Firefox
Get Firebug (Firefox plugin)
Open your webpage in Firefox. RClick in top left corner where there is no content, just the background image, and then click "Insepct element..." in the context menu. You should now either get a popup window or a new window frame in the bottom of your browser window.
Either way, that window should have the "html" tab selected, if not, click it. There you should see
<html>
-> <head>
-> <body>
</html>
Click the body element. On the right hand side of that window frame you should now have the computed CSS styles for the body element. Click "center" next to "text-align", hit enter (allows you to enter a new attribute), and type in
visibility
[hit enter]
hidden
[hit enter] x 2
Now click "img/bulb" next to background, move the cursor to "center center / top left" and you can easily switch back and fourth between the two.
Should you change too much and things get crappy, just reload the page. These things only changes in your browser.
I had a go with firebug and although its a usefull little tool, its not going to help solve the imaging problem. Thank you all for your time and help
But what did you see when you hid all contents and went from center center to top left? What you should see is the image moving, not the image scaling. And I'm dead certain that's what you actually will see.
6 days later
what if you just made a "wholepage" DIV that fit just inside the BODY tags, and made the image background of the wholepage DIV instead of BODY?
would that give you what you're looking for?
OR, are you wanting to always have that certain amount of space between the left side of the browser and the start of the main content (so the bulb is always visible)?
If you're after a consistent space left, you'd want to make different changes... as well as the TOP LEFT solution (which is probably better craft than my extra DIV idea).
also for background-size you can specifiy percentages such as 100% which will make it the width of the viewing area whether that be 300px or 4000000px
10 days later
If you need the image to size automatically, have a look at the CSS3 background-size property. It will only work on more modern browsers, so pretty much any Chrome, any Safari, and Opera, Firefox 4-10, and IE9 (only 9)