Background image

johndoe99 · 08-09-2013 12:34pm #1

I have a website that contains 3 pages (site has been active about a year), today i was looking at the 3rd page, and it is a long page as i add images to it every now and again.

Today i noticed that the background image has stopped displaying in half of the page, code i used:

background-image: url(images/paper2.gif);

By default, a background-image is repeated both vertically and horizontally, so why did it stop, is there a certain size i'm not aware of in html?

I then tried adding:

background-repeat:repeat;

But to no affect.

redman85 · 08-09-2013 1:46pm

post up a link to the page in question if you can

johndoe99 · 08-09-2013 2:09pm

redman85 wrote: »

post up a link to the page in question if you can

http://homepage.upc.ie/custodianguard/dvd.html

thanks

yoyo · 08-09-2013 2:18pm

I can see the blue backgound image fine, although you have lots of markup errors see here. I would also recommend avoiding table layouts and look into floating divs instead. The page is also very big, I would also look into paginating it

Nick

johndoe99 · 08-09-2013 2:51pm

yoyo wrote: »

I can see the blue backgound image fine, although you have lots of markup errors see here. I would also recommend avoiding table layouts and look into floating divs instead. The page is also very big, I would also look into paginating it

Nick

can you see the blue background image all the way to the end of the page?

UPDATE: i'm using Firefox, i just opened tthe page in Internet Explorer and the background is fine.

yoyo · 08-09-2013 7:03pm

johndoe99 wrote: »

can you see the blue background image all the way to the end of the page?

UPDATE: i'm using Firefox, i just opened tthe page in Internet Explorer and the background is fine.

I use FF whatever is the latest version. It did span to the end of the page. Your issues could be cache related, or an issue due to the many markup issues on your site. I would definitely recommend fixing all/most of the issues with markup and using floated divs over tables for layout

Nick

tricky D · 09-09-2013 1:44pm

Possibly a page too big, bg image too small issue. The browser might be getting fed up writing the image into the page and gives up after a few thousand writes. Try to make the image twice as high and wide and change the format from gif to jpg which is more appropriate for this image and should allow you compress the filesize a good bit own from 27.58kB as you can bring the quality right down with this type of image.

+1 for clean up your code and use divs for layout.

cormee · 09-09-2013 4:00pm

It's tiling for me

sheesh · 10-09-2013 1:49pm

stops tiling for me. on ff23.0.1

css makes no mention of repeat.

I am wondering if it is due to the table extending outside of its containing element.

try putting a position: relative; in the styles for the table and its containing div

the computed height of the body is 428px
the computed height of the table of the images is 70178px

so there is your problem

johndoe99 · 10-09-2013 3:53pm

sheesh wrote: »

stops tiling for me. on ff23.0.1

I'm using Firefox 23.0.1 too. I opened my webpage on my laptop last night (Firefox 22), and it's fine. Surely this not some sort of bug.

I'm going to use the Validation Service, that yoyo suggested, fix all those warnings first. Definitely don't want that problem appearing on the other page too.

yoyo · 10-09-2013 6:32pm

I'm also on 23.1 and there is no issue, see here. your problem is possibly visible only on certain resolutions, and not others. But do try fixing your code errors. I also recommend dropping the table layout and learning about inline floated divs instead of using table layouts as mentioned above. Check this tutorial out for more info. Just make a container div, and set the margin L&R to be auto to center it. something like:
CSS

body{background-image: url(./images/bg.png);}
#container{margin: 0 auto; width: 940px; padding: 10px 4px;}
img{float: left; display: inline; margin-right: 10px;}
.clear{clear: left;}

HTML

<html>
<head>
<title>..
</head>
<body>
<div id="container">
<img src="movie_poster.jpg" alt="#" title="#" />
..
..
..
..
<span class="clear">&nbsp;</span> <!--use this to break to a new line, although once the image reaches the end of the containers width it should auto break-->
</div><!--end container-->
</body>
</html>

You should achieve something similar to what you have with this simple code, but it's cleaner and should be less problematic/browser dependent. I do recommend pagination also, as the page renders massively, even a new page after every 100 or so covers would be a major improvement.

Hope this helps

Nick

johndoe99 · 10-09-2013 6:47pm

yoyo wrote: »

I'm also on 23.1 and there is no issue, see here. your problem is possibly visible only on certain resolutions, and not others. But do try fixing your code errors. I also recommend dropping the table layout and learning about inline floated divs instead of using table layouts as mentioned above. Check this tutorial out for more info. Just make a container div, and set the margin L&R to be auto to center it. You should achieve something similar to what you have with this simple code, but it's cleaner and should be less problematic/browser dependent. I do recommend pagination also, as the page renders massively, even a new page after every 100 or so covers would be a major improvement.

Hope this helps

Nick

Will have a read of those links, appreciate your help. Studied html in college back in 1998, been a while since then.

I fixed all the warnings on that validation website yesterday, but when i ran the test again it gave me an additional 600+ errors. So i put back up the old code.

I am curious about something, if there are so many warnings and errors on that validation website, how come my website isn't crashing or worse not working at all?

yoyo · 10-09-2013 7:06pm

johndoe99 wrote: »

Will have a read of those links, appreciate your help. Studied html in college back in 1998, been a while since then.

I fixed all the warnings on that validation website yesterday, but when i ran the test again it gave me an additional 600+ errors. So i put back up the old code.

I am curious about something, if there are so many warnings and errors on that validation website, how come my website isn't crashing or worse not working at all?

Web browsers arn't strict when it comes to parsing the markup, which in itself leads to problems like you describe that can vary from browser to monitor to OS. By creating a website with "valid" syntax, the chances of problems like these occuring are vastly slimmer. As a starting point you should always declare a html doctype at the start of the html document. If you don't the browser will guess, sometimes incorrectly the doctype your using. A typical one nowadays which should do fine is:

<!DOCTYPE html>
head
body
..
</html>

This is the standard doctype for html5, but as html5 is backwards compatible should work fine if you use the code mentioned above.
The code I provided is fairly basic, and should be built upon rather than just copy and use. You may not want all your images to be floated so you may want to build another css class for your images instead, such as:

.poster{float: left; display: inline; margin-right: 10px;}

for CSS then:

<img src="movie_poster.jpg" class="poster" alt="#" title="#" />

for the html.
This way only images assigned the class poster will float.

Play around with it and see how you get on. The reason your getting loads of errors is your markup is all over the shop, whereas this method is much cleaner with less tags to be opened/closed. I'm not sure why you have so many closed (</a>) anchor elements without them being open, so use your text editors find & replace finction and get rid of all these as a starting point on the dvds page (I don't see you have any actual hyperlinks on this page)

Nick

johndoe99 · 03-12-2013 3:32pm

update: i fixed all the errors and warnings. w3 has given it a successful on all 3 pages.

Background image

Comments