Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS background challenge

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #22515
    johnstevens
    Member

    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 :)

    #46638
    Hawke
    Member

    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

    #46641
    skullcrusher
    Member

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

    #46646

    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.

    #46648
    Hawke
    Member

    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…

    #46669
    Chris Coyier
    Keymaster

    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:
    https://css-tricks.com/examples/SplitBackgroundPattern/

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

    #46672
    Hawke
    Member

    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.

    #46674
    Towers
    Member

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

    #46688
    Jermayn Parker
    Participant

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

    #46689
    welshstew
    Member
    "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

    #46695
    welshstew
    Member
    ".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.

    #46737
    johnstevens
    Member
    "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:
    https://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….

    #46742
    johnstevens
    Member

    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.

    #55358
    hjr
    Member

    Hi folks,

    Do you have any idea, why those divs (left and right) covers all the content?

    Thanks in advance for help,
    Martin

    #57466
    TheMonk
    Member

    There is actually a fairly simple solution to placing content over the backgrounds. I’ve produced this and tested it in the following browsers successfully:

    PC: ie6, ie7, FF3, Opera, Chrome
    MAC: ff, safari

    Basically you add another div to the page and set it to position absolute, set it’s width and height to 100% and reset the co-ordinates to 0,0. This re-creates the body so that any html there in uses the top left corner of the browser window as an anchor. Place your content in this div and you’re set. In the screen shot below the white represents a div of content that is centered in the middle of the page.

    [img]http://www.neo-media.ca/bgsplit/bg-split.jpg[/img]

    Here is the code for the page, note the addition of the "wrapper" divs in the css and body:

    Code:

    Split Background Pattern by CSS-Tricks


    Cheers,
    Pierre Lemoine

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.