Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Dec 2009
    Posts
    240
    Thanks
    7
    Thanked 0 Times in 0 Posts

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

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

  • #2
    Regular Coder
    Join Date
    Dec 2009
    Posts
    115
    Thanks
    2
    Thanked 10 Times in 10 Posts
    Code:
    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.

    Code:
    background: #5f4d4d;

  • #3
    Regular Coder
    Join Date
    Dec 2009
    Posts
    240
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Dean440 View Post
    Code:
    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.

    Code:
    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

  • #4
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Byronwells View Post
    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.

  • #5
    Regular Coder
    Join Date
    Dec 2009
    Posts
    240
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by edub629 View Post
    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..

  • #6
    Regular Coder
    Join Date
    Dec 2009
    Posts
    240
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by edub629 View Post
    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

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Byronwells View Post
    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 -
    Code:
    /* CSS Document */
    
    body {background: url(images/background.jpg);}
    * {margin:0;padding:0;}
    
    /************************************************
    
    *	Header  									*
    
    ************************************************/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder
    Join Date
    Dec 2009
    Posts
    240
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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 -
    Code:
    /* 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

  • #9
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    311
    Thanks
    1
    Thanked 35 Times in 35 Posts
    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."
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • Users who have thanked Donkey for this post:

    edub629 (12-18-2009)

  • #10
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hrmmm... this guy (byron) has some interesting theories about css and web design. :-D

  • #11
    Regular Coder
    Join Date
    Dec 2009
    Posts
    240
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by Donkey View Post
    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...

  • #12
    Regular Coder
    Join Date
    Dec 2009
    Posts
    240
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by edub629 View Post
    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..

  • #13
    Regular Coder
    Join Date
    Dec 2009
    Posts
    240
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I mentioned what margin: 0 auto; does in my first post.
    To center something you need 3 things:
    1. DocType declaration
    2. an element with a width
    3. 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 -
    Code:
    body {
    
    	background: url(images/background.jpg);
    	margin: 0;
    	padding: 0px;
    }
    Or, better yet, without the image and using the CSS reset, like this -
    Code:
    body {background: #393939;}
    * {
    margin: 0;
    padding: 0;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #15
    New Coder
    Join Date
    Dec 2009
    Location
    United Kingdom...for now
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •