background challenge

[johnstevens]

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

[Hawke]

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

[skullcrusher]

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

[Digital Skraps]

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.

[Hawke]

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…

[Chris Coyier]

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.

[Hawke]

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.

[Towers]

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

[Jermayn Parker]

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

[welshstew]

"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

[welshstew]

".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.

[johnstevens]

"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….

[johnstevens]

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.

[hjr]

Hi folks,

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

Thanks in advance for help,
Martin

[TheMonk]

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:

Cheers,
Pierre Lemoine

[Author]

Posts