By TrueSign on

Hi,

I'm new in drupal.
I have create my custom theme and add a image background to body tag in my css file. All working fine with just one background. This image position is right-top and have half width of a full page. I would like to add gradient to background as well to cover rest of the page. Anyone have any idea what css I should use to see 2 backgrounds? In page.tpl I have got those divs: div id="page-wrapper" & div id="page". I have tried to assign another background to #page-wrapper and #page but nothing works. I even add another div to wrap around page, but without any results as well.
Anyone know how to put gradient background image repeat-y on very minus z-index and then on top of it another background image positioned on right side of the page?

⋅ Categories: Drupal 7.x

Comments

nevets’s picture

nevets commented

You could use the approach at http://css-tricks.com/examples/CSS3Gradient/. Modern browsers get a gradient, old browsers get a solid color

TrueSign’s picture

TrueSign commented

Thanks for reply.
I already tried that. But if I put

	background: #19194d; /* Old browsers */
	background: -moz-linear-gradient(left,  #000000 0%, #19194d 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#19194d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #000000 0%,#19194d 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #000000 0%,#19194d 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #000000 0%,#19194d 100%); /* IE10+ */
	background: linear-gradient(left,  #000000 0%,#19194d 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#19194d',GradientType=1 ); /* IE6-9 */

and

background-image:url(../images/backgroundphoto.jpg);
	background-repeat: no-repeat;
	background-position: right top;

in a #body css there is just that second image displayed. No gradient at all.

nevets’s picture

nevets commented

Are they all part of the same html tag (same css selector)?

TrueSign’s picture

TrueSign commented

Yes, the same css selector.

samwich’s picture

samwich commented

I posted a quick example of this a while ago using CSS 3 and multiple backgrounds.

http://www.samwirch.com/blog/multiple-image-backgrounds-css-3

I'm not sure if it would work with the built in gradient functionality now in CSS, but you might be able to create an image of the gradient and apply that as a second background image if it doesn't work.

TrueSign’s picture

TrueSign commented

Thanks for your reply. I have tried that and that doesn't work as well. Anyway, I decided to left it as it now. I created one bigger bg with gradient inside it.

ergunk’s picture

ergunk commented

#page-wrapper background might not work without a defined height(you might fix that additional CSS hacks) so i suggest you to use #page and #main-wrapper if possible. Example code:

#page {
background-image: url('page-wrapper-background-image.png');
background-repeat: repeat-y;
background-position: left top;
}

#main-wrapper{
background-image: url('page-background-image.png');
background-repeat: no-repeat;
background-position: right top;
}


Mediasaur | http://www.mediasaur.com/en | http://twitter.com/mediasaur

Before asking for help, please read this http://slash7.com/2006/12/22/vampires/ and don't be a "Help Vampire". :)