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.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool How would you code this background?

    Hi there.
    Im new to website design and need help.
    how would you code this background (attached) in your html/css? just put this image as a background?
    I thought of multiple divs, but line crossings have some gradient there, also diagonal lines are not easy to manage (am i wrong?)
    Its about 30kb...i think its waste of users' traffic.

    Thank you!
    Attached Thumbnails Attached Thumbnails How would you code this background?-pieconcept_1.jpg  

  • #2
    New Coder
    Join Date
    Jun 2010
    Location
    Regina, Saskatchewan, Canada
    Posts
    28
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Put the picture in the same folder as your HTML/CSS page, then put this code somewhere in your CSS Page

    Code:
    body { background-image:url("INSERT IMAGE NAME HERE"); }
    if you want to make it repeated, then make it like this

    Code:
    body { background-image:url("INSERT IMAGE NAME HERE");
    background-repeat: repeat; }
    If you need any other things such as making the image fixed, then just ask.

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your reply.

    I know how to put picture as a backgound image, im asking about optimizing it. Do you see anyway of making this image repeating?

    Is it a normal practice to make the whole background as a one image?

  • #4
    x64
    x64 is offline
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A larger image results in larger image size, and thus slower page load speed, which in this case, the background image can only affect dial-up users.
    But totally, I don't think there's any considerable difference.

    Also consider that your image is totally black now, and if you add some contents, it's size increases much more than it's current size.

    Also, if you wanna make your background black, why do you wanna use this "image"?

    Simply use CSS:
    Code:
    background-color: #000000;
    I don't see any more ambiguity in your question.
    Last edited by x64; 06-24-2010 at 08:47 AM.

  • #5
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your reply! I appreciate it!

    I don't wanna use a black background. i want to use the background i provided. I just want to create this backgound with html&css only if its possible. if its not i want to know the best solution to this problem.

    Thank You

  • #6
    x64
    x64 is offline
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't know any better solution, I think it's the best. I've used this method in Skills Competition and I have earned the score.

    This is the best thing you could do. DSL / Leased / Satellite users don't have slightest problem, for dial-up users, it takes 3-4 seconds to load, which is not considerable yet.

    Also, be a little more realistic. Number of DSL users nowadays is more than Dial-up users, and also these few kilobytes don't bother anyone or waste someone's traffic.

  • #7
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks!
    what about different screen(browser) resolutions?
    It seems kinda unprofessional....

  • #8
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Assuming you have made this image yourself, it may be worth making the bottom part of the image fade to black. That way, you can put the page background colour as black, but have that image repeat along the x axis at the top

    That way, if your visitors have a large screen resolution it will look seamless, as it fades to black at the bottom and continues to be black beyond the image.

    If you wanted to repeat the image along the X and Y axis (down and across the page) you'd need an image which can be tiled in such a way. In the brief look I took, it doesn't seem as though that image would tile vertically.

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You could reduce the size of your background image somewhat by decreasing the quality using Photoshop or similar. It's not exactly huge at 30k or so at the moment but you could probably half that if it's a concern.

    Regarding differing screen sizes, and what happens if the viewport is greater than the background image, you've got a couple of choices. You could repeat the background image either vertically or horizontally or both - but your image doesn't really lend itself to that. Alternatively, centre the background image, don't repeat it and have a complementary background colour for the rest of the page.

    For example, if you have markup something like:

    Code:
    <body>
    <div id="wrap">
    ...content
    </div>
    </body>
    then set your background image as:

    Code:
    #wrap{background:#000000 url(/path/to/image.jpg) no-repeat top center}
    so the #wrap div has a black background to complement the image.

  • #10
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your replies!

    taijuten,
    I cannot fade bottom part to black because it is a design concept.
    Do you think this image can be tiled horizontally though?

    SB65,
    I got your point. I've already decreased quality. I cannot decrease more.

    Repeating the image is not a choice, since this image should cover the whole screen.
    centering image is not a bad idea, but it will not look great though.
    And centering will only cover higher resolution. what about lower resolution? website will be just cut-off.
    Im still trying to get how to make diagonal divs. so lame!

    Any more options for me?

    Thanks guys!

  • #11
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You could try something like this.

  • #12
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    821
    Thanks
    10
    Thanked 78 Times in 76 Posts
    Hey, all you need is a 1X1 pixel black image and let it repeat. Can't get a faster load for an image that size:

    For a tiled image, change to:
    Code:
    body {
    width: XXpx;
    height: YYpx;
    margin: 0 auto;
    background: #fff url(image_name.jpg) repeat top left scroll;
    }

    Put that CSS on an external CSS file if you have more than one page. Put the CSS between the style tags and place them between the head tags if using it on one page. Style another tag other than the body tag if you are using a div wrap container. Should you want the contents of page to scroll over the background image, change "scroll" to "fixed".

    The alternatibe is to use an image slice and repeat it although a 1 pixel image is a slice. :P
    ☠ ☠RON☠ ☠

  • #13
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    how about http://www.cssplay.co.uk/layouts/background.html

    i interpret this as you want to use that image as the "entire" background for the page. (think like the newish google background images)

  • #14
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    821
    Thanks
    10
    Thanked 78 Times in 76 Posts
    Quote Originally Posted by met View Post
    how about http://www.cssplay.co.uk/layouts/background.html

    i interpret this as you want to use that image as the "entire" background for the page. (think like the newish google background images)
    OP's image is large enough, but Stu always has elegant solutions.

    Several other sites with same/similar code:

    Background to Fit Screen:

    http://paynelessdesigns.pastebin.com/f760990b | http://paynelessdesigns.pastebin.com/VUSbessd
    http://www.scriptdungeon.com/freejav...reescripts1284
    http://css-tricks.com/perfect-full-p...kground-image/
    http://css-tricks.com/how-to-resizea...kground-image/
    ☠ ☠RON☠ ☠

  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    24kb isn't terrible for file size. I do think it could look good if you size it to the browser.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Tags for this Thread

    Posting Permissions

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