Grow your CSS skills. Land your dream job.

background challenge

  • # April 1, 2008 at 3:06 pm

    Hello guys,

    I’m standing before a challenge and because to celebrate this new forum, I like to ask you to inspire me on this issue.
    We need a background 100% wide but what goes into a different pattern on 50% of the screen.

    The idea of making background image that is for example 2500 px wide and repeat on y is not what I’m looking for.

    I have a sample of the background attached.

    I’m curious what you come up with :)

    # April 1, 2008 at 3:21 pm

    Wow… sorry but that sound so much like "We need a free background, please do one for us"
    I mean… cool if people want to help out, but a challenge ? Erm, sure :P

    # April 1, 2008 at 3:23 pm

    Great way to celebrate the forum.. hehe :mrgreen:

    # April 1, 2008 at 3:31 pm

    interesting.

    off the top of my head the way i would probably do it is create a 2 divs and set the widths accordingly. one would repeat underneath the other. you could do this with z-index maybe and positioning. without more information thats my initial idea.

    idk if the site is supposed to be centered or left aligned or how the content needs to flow.

    # April 1, 2008 at 3:35 pm

    I assume that he want his website to be in-between so you have one of the pattern on the left, and the other on the right. I would probably try to play with div too…

    # April 1, 2008 at 11:15 pm

    Hey John,

    Interesting challenge. I think this simple solution does the trick:

    Code:
    #leftHalf {
    background: url(images/bg-1.jpg);
    width: 50%;
    position: absolute;
    left: 0px;
    height: 100%;
    }
    #rightHalf {
    background: url(images/bg-2.jpg);
    width: 50%;
    position: absolute;
    right: 0px;
    height: 100%;
    }

    Check out the example:
    http://css-tricks.com/examples/SplitBackgroundPattern/

    Cutting your image up didn’t line up quite right, but the theory seems to work.

    # April 1, 2008 at 11:40 pm

    There is a problem with the repetition on high resolution in your exemple tough, but that’s coming from your image and not really from the css. So yeap, the solution posted by Chris is probably the one everyone will want to use.

    # April 1, 2008 at 11:48 pm

    Hawke’s right, but if you’ve got something over that then no one will see it and it won’t matter at all.

    # April 2, 2008 at 3:42 am

    Is two smaller images better for bandwidth/ loading etc than one big image?

    # April 2, 2008 at 3:47 am
    "germ" wrote:
    Is two smaller images better for bandwidth/ loading etc than one big image?

    It should be, due to the ability of most modern browsers to multi thread downloads of assets (apart from ie sh!ts, sorry I mean six ;) )

    The best thing to do is to try both and install yslow firefox add on to see the results:
    https://addons.mozilla.org/en-US/firefox/addon/5369

    .V1
    # April 2, 2008 at 4:53 am
    "welshstew" wrote:
    "germ" wrote:
    Is two smaller images better for bandwidth/ loading etc than one big image?

    It should be, due to the ability of most modern browsers to multi thread downloads of assets (apart from ie sh!ts, sorry I mean six ;) )

    The best thing to do is to try both and install yslow firefox add on to see the results:
    https://addons.mozilla.org/en-US/firefox/addon/5369

    actually, 2 smalls load longer than one big.

    2 http requests, same total file size as 1 combined file… and combined file has 1 http request.

    # April 2, 2008 at 5:11 am
    ".V1" wrote:
    actually, 2 smalls load longer than one big.
    2 http requests, same total file size as 1 combined file… and combined file has 1 http request.

    I agree, it would depend on file size, apologies that I didn’t make that clearer in my original post.

    However, I still believe that due to browsers being able to handle multiple http requests at any one time, it would be able to download two smaller images, simultaneously, faster than one larger image. The time difference for this download would be negligible, a mere matter of milliseconds to the end user.

    If browsers only handled one http request at a time then yes, one file would be faster.

    .V1
    # April 2, 2008 at 9:57 am
    "welshstew" wrote:
    ".V1" wrote:
    actually, 2 smalls load longer than one big.
    2 http requests, same total file size as 1 combined file… and combined file has 1 http request.

    I agree, it would depend on file size, apologies that I didn’t make that clearer in my original post.

    However, I still believe that due to browsers being able to handle multiple http requests at any one time, it would be able to download two smaller images, simultaneously, faster than one larger image. The time difference for this download would be negligible, a mere matter of milliseconds to the end user.

    If browsers only handled one http request at a time then yes, one file would be faster.

    Even if it did load 2 simultaneously u would have to little control over when they both where are loaded, so the left could be done, and numb2 started loading. With 1 single u know both are done at the same time, :)

    # April 2, 2008 at 5:52 pm
    "chriscoyier" wrote:
    Hey John,

    Interesting challenge. I think this simple solution does the trick:

    Code:
    #leftHalf {
    background: url(images/bg-1.jpg);
    width: 50%;
    position: absolute;
    left: 0px;
    height: 100%;
    }
    #rightHalf {
    background: url(images/bg-2.jpg);
    width: 50%;
    position: absolute;
    right: 0px;
    height: 100%;
    }

    Check out the example:
    http://css-tricks.com/examples/SplitBackgroundPattern/

    Cutting your image up didn’t line up quite right, but the theory seems to work.

    Hey Chris,

    Thanks for the help, it’s almost perfect, on 1px left. I guess that is because when you multiply an odd number of pixels by 50% you always have 1px left. In the middle we have depending of the window size, sometimes a white line.

    Look at the idea we try to achive here: http://www.juniorkidsevent.nl/intro.html

    Its has other bugs asswel by the way :) But thats for later….

    # April 2, 2008 at 6:19 pm

    I made a small change to Chris solution and that is to give the body this background image of the left div and removed the background-image from the left div. Problem remains in the shield, and in 50% of the case it has a separation of 1px.

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".