...

View Full Version : How Do I Make The Background To Auto repeat the image no matter what size the website



Byronwells
12-16-2009, 04:53 AM
Alright guys

I have just put an image on for the background image... See here http://www.supreme-host.com/web/categories.php I have got the image to appear full width (even though it is a smaller image) But I have not got it to go full height no matter what size of the website is.. I would like it to auto repeat

This is the code that I have done so far
body {

background: url(http://www.supreme-host.com/web/images/background.jpg) ;
}

Dean440
12-16-2009, 05:02 AM
background: #000000 url('http://www.supreme-host.com/web/images/background.jpg') repeat;
The default for background repeats both x and y anyway, but that's just for good measure.

Also the image you're using is way too big if you're just going to use one color. Since it's just one color, you can make it 1x1 pixels and repeat it to save space. You can even go a step further and forget the image entirely.


background: #5f4d4d;

Byronwells
12-16-2009, 05:05 AM
background: #000000 url('http://www.supreme-host.com/web/images/background.jpg') repeat;
The default for background repeats both x and y anyway, but that's just for good measure.

Also the image you're using is way too big if you're just going to use one color. Since it's just one color, you can make it 1x1 pixels and repeat it to save space. You can even go a step further and forget the image entirely.


background: #5f4d4d;

How is the image too big?? The image is fine, it doesnt matter on the size....

This is how you solve the problem

margin: 0px auto 0px;

padding: 0px;


As you can see I have already done it :)

edub629
12-16-2009, 06:22 AM
How is the image too big?? The image is fine, it doesnt matter on the size....

This is how you solve the problem

margin: 0px auto 0px;

padding: 0px;


As you can see I have already done it :)


um... that is not the solution to the problem you posted... if you are trying to change the body background color, just use the background-color: #background: #5f4d4d; thing dean440 posted.

the margin rule you posted just centers the parent tag its controling.

Byronwells
12-16-2009, 10:49 PM
um... that is not the solution to the problem you posted... if you are trying to change the body background color, just use the background-color: #background: #5f4d4d; thing dean440 posted.

the margin rule you posted just centers the parent tag its controling.

Course it is.. If you take a look at my website now, you can tell that the whole things covers the whole of the website using that css..

Byronwells
12-16-2009, 10:50 PM
um... that is not the solution to the problem you posted... if you are trying to change the body background color, just use the background-color: #background: #5f4d4d; thing dean440 posted.

the margin rule you posted just centers the parent tag its controling.

And also I never said background color.. I am using an background image, not color

Excavator
12-17-2009, 12:52 AM
How is the image too big?? The image is fine, it doesnt matter on the size....

Why have a 48x171 image that is all one color. A 1x1 image would accomplish the same thing, so would Dean440's suggestion of background: #5f4d4d;.



This is how you solve the problem

margin: 0px auto 0px;

padding: 0px;


As you can see I have already done it :)

[ICODE]margin:0 auto 0; would horizontally center an element but it requires a width to do so. Your use of margin:auto; here does nothing. Exactly what problem are you saying it solves? I remove the margin and padding and the only thing that happens is the header moves down a bit.

Try it like this -
/* CSS Document */

body {background: url(images/background.jpg);}
* {margin:0;padding:0;}

/************************************************

* Header *

************************************************/

Byronwells
12-17-2009, 02:47 AM
Why have a 48x171 image that is all one color. A 1x1 image would accomplish the same thing, so would Dean440's suggestion of background: #5f4d4d;.



[ICODE]margin:0 auto 0; would horizontally center an element but it requires a width to do so. Your use of margin:auto; here does nothing. Exactly what problem are you saying it solves? I remove the margin and padding and the only thing that happens is the header moves down a bit.

Try it like this -
/* CSS Document */

body {background: url(images/background.jpg);}
* {margin:0;padding:0;}

/************************************************

* Header *

************************************************/



It is very simple you know.. If you have a look at the link provided in the first then you will noticed that the background image covers the whole of the website... I have not changed the background size... All I have done is added the code that all of you is saying does nothing, but I can prove that it does. Hence it did it

Donkey
12-17-2009, 04:05 AM
When I follow your link I see a small black rectangle in the top left corner, nothing else. It doesn't stretch anywhere.

You have been given good advice but you obviously think you don't need it, and the tone of your replies are ungracious to say the least. Why post for advice then ignore it? Does it give you some sort of perverse pleasure?

I am reminded of an old west country (UK) adage "You can't educate pork."

edub629
12-18-2009, 03:40 AM
hrmmm... this guy (byron) has some interesting theories about css and web design. :-D

Byronwells
12-22-2009, 04:16 AM
When I follow your link I see a small black rectangle in the top left corner, nothing else. It doesn't stretch anywhere.

You have been given good advice but you obviously think you don't need it, and the tone of your replies are ungracious to say the least. Why post for advice then ignore it? Does it give you some sort of perverse pleasure?

I am reminded of an old west country (UK) adage "You can't educate pork."


Donkey

I can not argue with the facts, can I? The facts are that before I added a certain piece of code, then it wasnt working.. But after that it worked? So what am I too believe?? Here's the website http://www.supreme-host.com/web/categories.php

I havent changed the background image size at all.. But you are lot are saying that the code that I have entered doesnt do nothing.. But I have to dispute that fact, because it has done something for me...

Byronwells
12-22-2009, 04:18 AM
hrmmm... this guy (byron) has some interesting theories about css and web design. :-D

Alright Edub629

Im just going on facts... I dont claim to be an expert in php, but I do know there are several ways that you can code things to get them to work like you want.. One way might not suit everyone..

I just pointing out and disputing until someone can actually can come back to me and explain why the piece of code that I add doesnt do what I reckon it does.. (When I have seen it)

I havent got anything against anyone one here.. :)

Byronwells
12-22-2009, 04:21 AM
Alright Excavator

Could you please kindly take a look at my website http://www.supreme-host.com/web/categories.php and tell me what I have done differently to get the background image to appear around the whole of the website as I asked for :)

Excavator
12-22-2009, 04:50 AM
I mentioned what margin: 0 auto; does in my first post.
To center something you need 3 things:

DocType declaration
an element with a width
that element's right/left margins set to auto

When you apply margin: 0 auto 0; to your body it is actually using the margin:0; but there are no left and right dimensions to auto... so that part is ignored.

Have you tried any of the suggestions offered so far?
Try it like this -
body {

background: url(images/background.jpg);
margin: 0;
padding: 0px;
}

Or, better yet, without the image and using the CSS reset (http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/), like this -

body {background: #393939;}
* {
margin: 0;
padding: 0;
}

johngreenwood
12-22-2009, 04:54 AM
You applied background:url(images/background.jpg) and it did what it is supposed to do. As was already pointed out by someone here, it's default behaviour to tile the background.
I must agree with everyone else though, 1x1px image is adequate for your needs, and so is background-color.

Excavator
12-22-2009, 04:58 AM
Maybe you're not aware how the browser reads that margin line (http://www.spoono.com/csst/tutorials/tutorial.php?id=5).
The attributes are read clockwise so the measurements refer to top/right/bottom/left.
margin: 0 1px 2px 3px; would be the same as

#id {
margin-top:0;
margin-right:1px;
margin-bottom:2px;
margin-left:3px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum