how would you do this (CSS question)
- Started
- Last post
- 11 Responses
- qoob
So I need to create a background for a site where the left half of the page is one color, and the right half is a different color. The background needs to be full liquid width. How would you achieve this using either CSS or images?
- prophetone0
just create a dual color png bg strip that's really wide like 1920x10 and use some body css to center it, position = center top, repeat-y
- more like 3000 wide nowdaysalbums
- whatever floats your preferred application of said product but watch out for the ipad image size bugprophetone
- 1920 wouldn't suffice on 2560 my pointalbums
- obviouslyprophetone
- prophetone0
body {
background-image: url(splitcolor1920x10.png);
background-position: top center;
background-repeat: repeat-y;
}
- qoob0
Thanks prophet. What is the ipad image bug?
- qoob0
^ Does that work cross browser?
- prophetone0
i ran into it a few times, basically if the image - usually a bg - is too large the ipad will simply not display it
- albums0
like this?
http://fuckfuckyeah.com/qbn/spli…
- albums0
i updated the css try it again
- qoob0
The CSS stuff is nice but if it doesn't work on IE7/8 I guess the image approach is best for now...
- albums0
target ie specifically and give them the image then, don't dumb down your site for IEs sake
- nb0
The image idea is fine, but I'm going to assume that your site will contain more content than just a background image. From the original post, we don't know exactly what the rest of the site will contain.
For example, if you have a left div that is set to 50% width, you should just be setting its background-color in CSS, and then you'd have the option of setting your body tag background-color to the other colour. No images required. Of course, there are a number of other ways to do this depending on what other elements your page is going to have.