SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background problem

    I have something strange going on with my background. The background is a different size than what the page size is on my computer. Can I make this fit the page correctly by just changing the size of it, or does something more intricate need to be done?

  2. #2
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Shakmbakm, please post your code and we'll be able to help you out.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    You can set a background-size property to change the size of a background image, but that won't work in IE8 and below.
    Most people don't resize background images like this.

    background-size also support a 'cover' value which normally does what you want with a large background image you want to cover an area in the best way it can.
    http://css-tricks.com/perfect-full-p...kground-image/

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the image is default on the top left of the screen. When I center it is when it becomes taller than the screen. here is the code I have for the background
    Code:
    body {
    	margin: 0; padding: 0;
    	font: 10px normal Arial, Helvetica, sans-serif;
    	background: #FFFFFF url(../images/index.png) no-repeat;
            width: 100%;
            display: table;
    }

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by shakmbakm View Post
    When I center it is when it becomes taller than the screen.
    It's not really clear what you are saying here. But apart from the CSS3 options, you could also go down the JS route:

    http://buildinternet.com/project/supersized/3/core.html
    http://srobbin.com/jquery-plugins/backstretch/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the image is centered but the menu is above the the top of the page.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    We need to see it to have any hope of understanding what's going on.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i'll upload a screenshot that you can look at soon.

  9. #9
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    screenshot and code

    here is a sample screenshot of what I mean.
    scnsht.jpg

    here is the my code
    Code:
    body {
    	margin: 0; padding: 0;
    	font: 10px normal Arial, Helvetica, sans-serif;
    	background: #FFFFFF url(../images/index.png) no-repeat center;
            width: 100%;
            display: table;
    }
    
    #wrapup {
        margin: 0 auto;
        width:1100px;
    }
    
    .container {
    	width: 1100px;
    	padding-top: 25px;
            padding-left: 5px;
    	margin: 30 auto;
    	position: reletive;
    }

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    If this is a cut-n-paste from the actual code, please note that in {position: reletive;} "relative" is misspelled. Screenshot is pending approval.

  11. #11
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for pointing that out! I fixed that, it had no effect on my problem though.

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Pardon me for not noticing earlier.

    .container {margin: 30 auto;} is missing a unit of measure.

    Without a link to the page, the best we can do is speculate, which can become tiresome. We need to be able to relate the css to the html to determine what is happening.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    We need to see your HTML and CSS code, not a screen shot. (Sending us a screen shot is like sending your doctor a photo and asking what's wrong with you.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Quote Originally Posted by ralph.m View Post
    We need to see your HTML and CSS code, not a screen shot. (Sending us a screen shot is like sending your doctor a photo and asking what's wrong with you.)
    Great analogy!!!

  15. #15
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the page :http://superfunproductions.com/
    And the background image mentioned: http://superfunproductions.com/images/index.png
    And the css: http://superfunproductions.com/css/superstyle.css

    The problem looks like your page is shorter that your background image. I would chop off the top part of the image and make it the background of your navigation then just make the page background to be the colour purple used. That way you'll get your full header and the page can be any length it needs to be.

  16. #16
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have noticed something new. In IE, safari, and google chrome the page looks good in a small box, when maximized the contents of the page changes but not the background which is when this problem occurs. Should I post both CSS and HTML whole files?

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Thanks, RyanKing1809.

    Shakmbakm, how do you want the background image to fit in the window? It looks like it is resting against the left edge, to me. Do you want it centered? Do you want it to stretch to the width of a wide monitor? What do you expect the page to look like? What does "looks good" mean?

  18. #18
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The way the images on the page are moving the background image would need to stretch

  19. #19
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    shakmbakm, you're a person of few words.

    This should center the background image:

    Code:
    body {
        background: url("../images/index.png") no-repeat scroll 50% 0 #FFFFFF;

    shakmbakm,

    Any idea why the body is set to display:table?

    Also, you might want to delete the left padding in .container, or reduce the width by 5px to compensate for it.

    Code:
    .container {
        padding-left: 5px;
        padding-top: 25px;
        position: relative;
        width: 1100px;
    }

  20. #20
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My apologies I don't try to come off that way. I do not know if there is a reason it is set to table honestly. Someone else who worked on this may have done that. Thanks for your help i'll try that out.

  21. #21
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I was just curious about the body table thing. Haven't seen it before. No biggie.

    One more change for the body element:
    Change the background color from #ffffff to #533996. That is the color of the background image & will make a big difference in the look of the page.
    Code:
    body {
        background: url("../images/index.png") no-repeat scroll 50% 0 #533996;
    The page width is 1100px. The image width is 1024px. Adding the background color will mask the difference.

  22. #22
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did work! Thank you so much for your insights, I will try to say more next time lol

  23. #23
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I didn't address the issue of the image moving up the page. Did that come clear by magic or are we still working on that?

  24. #24
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it was actually moving to the right so the centering of the background fixed that. One more thing, when I put the background color into the code the whole background just becomes white. I put it in like your example shows.

  25. #25
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Doesn't look like the color has been changed from white.

    This is what I see in your css:
    Code:
    background: #FFFFFF url(../images/index.png) no-repeat scroll 50% 0;


Bookmarks

Posting Permissions

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