13 {{ upvoteCount | shortNum }}
13 {{ upvoteCount | shortNum }}

CSS Noob! And my background only repeats to size of browser

by charliemwallace
11 replies
Hey guys,
I am trying to edit my aMember template and the background image only repeats to the size of the browser, which is fine for some pages, but any pages with content that you would have to scroll down to see just makes it look terrible as the background stops and it just goes to white.

You can see what I mean here Guitar Mastery Method
If you hold control and scroll in that's how you can see the white appear.

The CSS I have for it is this...

(I am expecting only the first part is revelant)

------------

body {
background: #000000 url(../img/background.jpg) center repeat;
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#222222;
}

* {
margin:0;
padding:0;
}

img {
border:0;
}

p {
margin-bottom:1.75em;
}

a {
text-decoration:none;
color:#2E3192;
}
a:hover {
text-decoration:none;
color:#0000FF;
}


-------------

Any ideas on why this is happened?

Cheers,

Charlie.
#background #browser #css #noob #repeats #size
  • Profile picture of the author littleCowCoding
    I tested it in
    Internet Explorer
    Firefox
    Chrome

    and it works fine in all of them
    Signature
    {{ DiscussionBoard.errors[9306789].message }}
    • Profile picture of the author littleCowCoding
      tell a lie, it doesn't work

      did you try

      background-size: cover;

      but you would have to yous a large background image
      Signature
      {{ DiscussionBoard.errors[9306795].message }}
      • Profile picture of the author littleCowCoding
        If that doesn't work you will have to write some jquery to get the browser width and height
        Signature
        {{ DiscussionBoard.errors[9306801].message }}
      • Profile picture of the author charliemwallace
        Originally Posted by littleCowCoding View Post

        tell a lie, it doesn't work

        did you try

        background-size: cover;

        but you would have to yous a large background image


        Nope haven't tried that yet, I would prefer to keep the file size down as small as possible so I am hoping to find a way around it.
        {{ DiscussionBoard.errors[9307219].message }}
        • Profile picture of the author smismi
          Originally Posted by charliemwallace View Post

          Nope haven't tried that yet, I would prefer to keep the file size down as small as possible so I am hoping to find a way around it.
          HTML Code:
          html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
          Try this it should work but change images/bg.jpg to ur img location...
          Signature
          Earn Extra Money From Home

          Total Financial Freedom in 6-12 Weeks?
          {{ DiscussionBoard.errors[9307649].message }}
        • Profile picture of the author onsmith
          Your problem is that you are setting the <body> and <html> height to 100% in the CSS file http://www.guitarmasterymethod.com/g...bkTcalNmoZ.css.

          You can fix this by either removing the code
          Code:
          html, body {
  height: 100%;
}
          from that css file, or by overwriting the rule somewhere else in your css. To overwrite the rule, place the code
          Code:
          html, body {
  height: auto;
}
          somewhere in your css after the offending file is loaded.

          Edit: After looking a little more, I think that the easiest solution would be to simply add the following css to your code:
          Code:
          body {
  height: auto;
  min-height: 100%;
}
          {{ DiscussionBoard.errors[9307668].message }}
          • Profile picture of the author smismi
            Originally Posted by onsmith View Post

            Your problem is that you are setting the <body> and <html> height to 100% in the CSS file http://www.guitarmasterymethod.com/g...bkTcalNmoZ.css.

            You can fix this by either removing the code
            Code:
            html, body {
  height: 100%;
}
            from that css file, or by overwriting the rule somewhere else in your css. To overwrite the rule, place the code
            Code:
            html, body {
  height: auto;
}
            somewhere in your css after the offending file is loaded.
            My code will work perfect because its not going to repeat image and when someone scroll its is going to be full width and height image , no repeat or nothing if u understand me...
            Signature
            Earn Extra Money From Home

            Total Financial Freedom in 6-12 Weeks?
            {{ DiscussionBoard.errors[9307705].message }}
            • Profile picture of the author onsmith
              smismi,

              I like your solution, but I'm worried that it won't cover the whole page, since you are adding a background to the <html> tag, and the <html> tag does not always cover the whole page.

              For instance, in Charlie's website, he is setting height:100% on the <html> tag, which means that the <html> tag will only extend to the size of the browser window. If the website is larger than the browser window, then a scrollbar will appear, but the <html> tag will not extend to the scrolled content. Since assigning a background image to an element makes that image appear only where the element is present, I wouldn't expect the background to appear behind the scrolled content.
              {{ DiscussionBoard.errors[9307733].message }}
              • Profile picture of the author smismi
                Originally Posted by onsmith View Post

                smismi,

                I like your solution, but I'm worried that it won't cover the whole page, since you are adding a background to the <html> tag, and the <html> tag does not always cover the whole page.

                For instance, in Charlie's website, he is setting height:100% on the <html> tag, which means that the <html> tag will only extend to the size of the browser window. If the website is larger than the browser window, then a scrollbar will appear, but the <html> tag will not extend to the scrolled content. Since assigning a background image to an element makes that image appear only where the element is present, I wouldn't expect the background to appear behind the scrolled content.
                onsmith it is going to cover the whole page , i am doing that on every page i created because it cover whole page , if u want i'll show you on images or you can try it yourself..
                I can't explain You very good but You can try my code and You will find result of it ..
                Signature
                Earn Extra Money From Home

                Total Financial Freedom in 6-12 Weeks?
                {{ DiscussionBoard.errors[9308509].message }}
  • Profile picture of the author charliemwallace
    Wow I love this place, you guys are amazing!

    Thank you very much for your help with this! All sorted now.

    Cheers!!

    Charlie.
    {{ DiscussionBoard.errors[9308644].message }}
  • Profile picture of the author smismi
    You are welcome Charlie , if u need some help just post it in this section and I will try to help You
    Signature
    Earn Extra Money From Home

    Total Financial Freedom in 6-12 Weeks?
    {{ DiscussionBoard.errors[9309794].message }}

Trending Topics