Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16
  1. #1
    Senior Member
    Join Date
    Oct 2007
    Posts
    241
    Member #
    15910
    Hi,

    I am trying to have a main background of my page. What I did is I created a div which includes everything such as:

    <div class="mainarea">

    </div>


    and css looks like this:

    .mainarea
    {
    background-image:url('pictures/mainbackgr.jpg');
    }

    it still does not show the background ...can you help?

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Are you sure that that file exists where you say it does? Can we see the page?

  4. #3
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    If as Shadowfiend mentioned, your image is in the correct path, and
    it still does not work, try specifying the dimensions of the image.

    Like this ... but use the correct sizes (not like my example).


    .mainarea
    {
    background-image:url('pictures/mainbackgr.jpg');
    width:900px;
    height:130px;
    }


  5. #4
    WDF Staff Wired's Avatar
    Join Date
    Apr 2003
    Posts
    7,657
    Member #
    1234
    Liked
    138 times
    This is why you should post here and not at other sites first. You get responses here first (not to mention GOOD ones). At least you joined this forum first
    The Rules
    Was another WDF member's post helpful? Click the like button below the post.

    Admin at houseofhelp.com

  6. #5
    Senior Member
    Join Date
    Oct 2007
    Posts
    241
    Member #
    15910
    It seems to start working when I add the width and height...However for some reason, after a certain height, the image keeps repeating itself and not like a single large image like I wanted....(the original image was 300x300 pixel but the width appears to work fine)
    The site is robotdukkani.com
    Also see the css code and the main page html code below:
    CSS:
    .mainarea
    {

    background-image:url('pictures/mainbackgr.jpg');
    width:900px;
    height:1900px;
    }

    and please view web page source code for html.

  7. #6
    Junior Member
    Join Date
    Apr 2009
    Posts
    7
    Member #
    18862
    Quote Originally Posted by ketanco
    Hi,

    I am trying to have a main background of my page. What I did is I created a div which includes everything such as:

    <div class="mainarea">

    </div>


    and css looks like this:

    .mainarea
    {
    background-image:url('pictures/mainbackgr.jpg');
    }

    it still does not show the background ...can you help?



    Pls you check your CSS Syntax and complet all the brace and method with sequance.

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    Specify that it NOT repeat ...

    background-image:url('pictures/mainbackgr.jpg') no-repeat;
    width:900px;
    height:1900px;


  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Actually I don't think that particular syntax will work. There are two ways to go:

    Code:
    background-image: url('pictures/mainbackgr.jpg');
    background-repeat: no-repeat;
    ...
    And:

    Code:
    background: url('pictures/mainbackgr.jpg') no-repeat;
    If putting no-repeat in background-image works... Well, it shouldn't :-P

    As a side note ketanco, keep in mind that you are setting this image as a background, and it will only show up if the element has content in it. mlseim's solution basically gives the element explicit size, forcing it to go to a specific size instead of letting it resize with the content in it. This is sometimes what you want, but not always, so make sure that's what you're going for.

  10. #9
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    Shadowfiend ...
    I didn't even notice the -image part ... I'm so used to only using background:url( );


  11. #10
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    :-D I figured. Interestingly enough, I don't very often use the shorthand version of background. I think it takes far too many options and I can never quite remember the order they're supposed to go in (though I'm pretty sure browsers are relatively good at figuring it out even if they're out of order). So usually I just stick to separating the rules out.

    In my perfect world, SASS would take their shorthand version of specifying multiple such properties and merge them into one shorthand property when possible.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:59 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com