CSS Related question

fatboy · Jun 13, 2012

Hey all.

Just a quick question really - I am trying to make a single page with a gradient background (top left -> bottom right) in CSS but also want a background image in the bottom right corner.

Is this possible to do in CSS (or CSS3 now isn't it??)

Sorry if this is a really numpty question, I have no web design talent at all and have been trying to read webpages on this.
I can seem to get either the image in the corner or the gradient but not both together!!!

Cheers
FB

webchick11 · Jun 13, 2012

What are you using to design the site - a content management system or straight html? That will make a difference in the answer.

With Joomla or WordPress, just apply the image to a module in the bottom right, and specify the background in the css. It all depends on what cms and template you are using.

fatboy · Jun 13, 2012

Its just plain old html.
Been digging about and its getting there. Here is what I have but now I just want the image bottom right.....ideas appreciated!

Code:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { min-height:100%; } /* to get the gradient to stetch to the bottom of the view port */
body {
	background: #a5c9e5;
	background: url(img.png) no-repeat 50% 300px, -moz-linear-gradient(top, #1e5799 0%, #a5c9e5 100%);
	background: url(img.png) no-repeat 50% 300px, -webkit-gradient(linear, 0% 0%,0% 100%, from(#1e5799), to(#a5c9e5));
	background: url(img.png) no-repeat 50% 300px, -webkit-linear-gradient(top, #1e5799 0%,#a5c9e5 100%);
	background: url(img.png) no-repeat 50% 300px, -o-linear-gradient(top, #1e5799 0%,#a5c9e5 100%);
	background: url(img.png) no-repeat 50% 300px, -ms-linear-gradient(top, #1e5799 0%,#a5c9e5 100%);
	background: url(img.png) no-repeat 50% 300px, linear-gradient(top, #1e5799 0%,#a5c9e5 100%);
}
</style>
</head>

<body>
<p>Content</p>
</body>
</html>

Copy and paste at its best

ugjunk · Jun 13, 2012

Use this site to create your gradients

http://www.colorzilla.com/gradient-editor/

fatboy · Jun 13, 2012

Ah don't worry - sorted it......easy this HTML

theAngle · Jun 13, 2012

It's possible to do only with CSS 2.1, you don't need to use CSS 3 because won't work in all browsers, when I mean all browsers I also include IE6 to IE8. Just because CSS 3 requires a lot more work to put the site working in all these browsers.

Actually, the only thing that you'd be needed from CSS 3 would be the multiple background property, but this feature doesn't work on versions below to IE9. To accomplish this you're going to need more work, there's no need for it, 'cause you can use CSS 2.1, instead.

So, doing this with CSS 2.1 will be easier if you have a solid understand of CSS. The technique to use this is by the bullet-proof float-based-layout.

All you gotta do is create some containers with 'div tag' and align them with the float property, then you add background the way you want, on them.

This is a much faster and reliable technique.

If you need more details, ask.

regmant · Jun 13, 2012

How did you fix it mate? Absolute positioning?

brutusmaxi · Jun 24, 2012

just watch older browser as it wont work in them

Fastviews · Jun 24, 2012

ugjunk said:
Use this site to create your gradients
http://www.colorzilla.com/gradient-editor/

Thats verry greatfull the link

i never used gradients like that.

SYAWEDIS · Jul 2, 2012

I am curious too, how did you accomplish this with html?

CSS Related question

fatboy

Elite Member

webchick11

Newbie

fatboy

Elite Member

ugjunk

Elite Member

fatboy

Elite Member

theAngle

Junior Member

regmant

Regular Member

brutusmaxi

Newbie

Fastviews

Registered Member

SYAWEDIS

Regular Member

Main Menu

Marketplace

Making Money

BlackHatWorld

Other