Background Image Problems on PHP Site

murphych

Hi I run a company called Business Power UK which has 7 associated satalite websites. The templates are pretty much the same accross the board but the problem I am having is that the background images distorts depending on what screen, browser of mobile device. Is there anyway I can write a code so the background images will display correctly on all browsers ?? or is the backround image size the issue. Check out www.businesspower.uk.com, www.businesselectricity.uk.com and www.businessgas.uk.com to see what is happening. Looking forward to your responses

Krik

the problem I am having is that the background images distorts depending on what screen, browser of mobile device

I assume by distort you mean that the light bulb part of the image isn't always were you want it (or even visible) in different screen sizes. If so this is because the "background-position" of the image is being set to "center center" it should likely be set to "left top", or in other word the default position.

If that's not it you may need to explain some more.

murphych

Hi, thanks for taking the time to reply !! I had a look at the files and couldnt find it. This is the sample of the php code for the page [url]www.businesspower.uk.com:[/url]

$bk_image = "newpylon.jpg";
require('includes/header.php');
?>
<div class="bg-pylon">
<div class="content content-dual" style="font-size: 0.98em;text-align: justify;">

Also, what is the perfect size for the background images??

Looking forward to getting this resolved !!

Kind Regards

Chris M

Weedpacket

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;
}

Krik

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 😃

Weedpacket

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....

murphych

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??

johanafm

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.

murphych

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

johanafm

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???

murphych

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

johanafm

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.

murphych

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

johanafm

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.

murphych

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

johanafm

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.

clairence

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).

Derokorian

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

Ashley_Sheridan

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)