- This topic is empty.
-
AuthorPosts
-
April 1, 2008 at 3:06 pm #22515johnstevensMember
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 #46638HawkeMemberWow… 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 :PApril 1, 2008 at 3:23 pm #46641skullcrusherMemberGreat way to celebrate the forum.. hehe :mrgreen:
April 1, 2008 at 3:31 pm #46646Digital SkrapsMemberinteresting.
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 #46648HawkeMemberI 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 #46669Chris CoyierKeymasterHey 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.
April 1, 2008 at 11:40 pm #46672HawkeMemberThere 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 #46674TowersMemberHawke’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 #46688Jermayn ParkerParticipantIs two smaller images better for bandwidth/ loading etc than one big image?
April 2, 2008 at 3:47 am #46689welshstewMember"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/5369April 2, 2008 at 5:11 am #46695welshstewMember".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.
April 2, 2008 at 5:52 pm #46737johnstevensMember"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….
April 2, 2008 at 6:19 pm #46742johnstevensMemberI 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.
March 26, 2009 at 7:19 am #55358hjrMemberHi folks,
Do you have any idea, why those divs (left and right) covers all the content?
Thanks in advance for help,
MartinMay 13, 2009 at 12:00 pm #57466TheMonkMemberThere 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, safariBasically 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 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.