Centering a background image with a gradient inline - css

My current css is
background: -moz-linear-gradient(top, rgba(47,163,216,0.85) 0%, rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(47,163,216,0.85)), color-stop(100%,rgba(47,163,216,0.85))),
url(http://i.imgur.com/HS5coix.jpg); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* IE10+ */
background: linear-gradient(to bottom, rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d92fa3d8', endColorstr='#d92fa3d8',GradientType=0 ),
url(http://i.imgur.com/HS5coix.jpg); /* IE6-9 */
background-position:center;
The problem is that the background-position isn't formatting the background image to center. Possibly something like background: linear-gradient(to bottom, rgba(47,163,216,0.85) 0%,rgba(47,163,216,0.85) 100%),
url(http://i.imgur.com/HS5coix.jpg) center;?
Hope you can help!


Have you tried setting background-position: center center;?
This solution worked here: Background Image won't center in IE 9


I'm afraid I just answered my own question. The solution was url(http://i.imgur.com/HS5coix.jpg)50%;. Sorry for the inconvenience and thanks for all the help!

Related

Gradient Background

Hi guys i am making a website for my college project and i am not very good at using Dreamweaver CS6. I made my designs in photoshop and i am struggling to use my gradient background in my website. I have tried a couple of times to get it to work but it either repeats a lot of times or it fills up as certain amount of the page but cuts off. Any help would be appreciated thank you in advance.
Here is the CSS code
html body
{
background: linear-gradient(to top, #48E7A2 0%, #86C4ED 100%);
background-size:cover;
}

You can copy this code. From http://www.colorzilla.com/gradient-editor/
You should use it on the html{} not on the body{}
and add height:100%;
html {
height: 100%;
background: #48e7a2; /* Old browsers */
background: -moz-linear-gradient(top, #48e7a2 0%, #86c4ed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#48e7a2), color-stop(100%,#86c4ed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #48e7a2 0%,#86c4ed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #48e7a2 0%,#86c4ed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #48e7a2 0%,#86c4ed 100%); /* IE10+ */
background: linear-gradient(to bottom, #48e7a2 0%,#86c4ed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48e7a2', endColorstr='#86c4ed',GradientType=0 ); /* IE6-9 */
}
DEMO

firefox - fill background with gradientt

hi there i am using the following code to create a gradient background in firefox... but the problem is that the gradient fills the page alright but it repeats...
<body style="background-image:linear-gradient(#eee,#ddd); background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);">
and below is the result of the above code
i want the gradient to stretch and fill the whole page... how can i do this.... any help would be appreciated thanks in advance... :)

Put this in a css file for a crossbrowser gradient:
body {
background: #2f2727; /* Old browsers */
background: -moz-linear-gradient(top, #2f2727 0%, #1a82f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f2727), color-stop(100%,#1a82f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2f2727 0%,#1a82f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2f2727 0%,#1a82f7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2f2727 0%,#1a82f7 100%); /* IE10+ */
background: linear-gradient(to bottom, #2f2727 0%,#1a82f7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2727', endColorstr='#1a82f7',GradientType=0 ); /* IE6-9 */
}
Gradient generator.

The easiest way would be to simply add background to HTML element and set its height to 100%:
html {
/* and dont forget the prefixes ;) */
background: linear-gradient(to bottom, #2f2727 0%,#1a82f7 100%) no-repeat;
height: 100%;
}
http://jsfiddle.net/Caja9/

i tried the below code and it worked
background-image:-moz-linear-gradient(#eee,#ddd); height:100%;

Diagonal gradient in css

Most of the gradients I've seen are either vertical or horizontal. Is it possible to have a diagonal gradient using css? I would like to have a gradient that starts out dark in one corner and becomes lighter in the opposite corner.

background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
http://jsfiddle.net/jrc72/show

Yes. http://www.colorzilla.com/gradient-editor/ has option to pick diagonal, see orientation.

See this demo http://jsfiddle.net/FQSdb/
and also check out http://www.colorzilla.com/gradient-editor/ for various orientation options

Is it possible to use css to make a background image "fade" or gradient the bottom portion to transparent so that a background color shows?

I know that this can easily be done in any image editing program, I was just curious if there was a way just using css.
Example:
body {background-color: #837960; background-image: url("Images/background.jpg") background-repeat: no-repeat;}
Could you use css to fade the background image into the background color so a visible line does not exist or should I keep adding a gradient to transparency in Photoshop?

It is possible - in CSS3 you can set multiple values for background
body {
background: #837960 url("https://i.stack.imgur.com/MUsp6.jpg") 0 0 no-repeat;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(130,91,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(130,91,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#825b00',GradientType=0 ); /* IE6-9 */
}
However, it will work only in modern browser that supports CSS3
(code generated via http://www.colorzilla.com/gradient-editor/)

Yes it's possible with CSS using the linear-gradient() function with multiple background images:
body {
background-color: #837960;
background-image: linear-gradient(
to bottom, transparent, #837960
), url("Images/background.jpg");
background-repeat: no-repeat;
}
Specify the gradient as the first image so it gets stacked on top, and use it to fade from transparent at the top to the opaque background-color at the bottom. This will give the illusion the image underneath is fading into the background without requiring alpha-transparency on the image itself.

Ideally, you should just edit the image so as to have a consistent look across browsers.
While you can have a background gradient, that would appear behind an image, as the background images are placed over background color. In order to have the image look like it is fading into another color, you would need to place another tag on top of that the body such as:
body { background: url('https://i.stack.imgur.com/MUsp6.jpg') }
div.content {
width: 100%;
height: 100%;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
<body>
<div class="content">Example</div>
</body>
Or whatever color/positioning combination you would like. A good resource is http://www.colorzilla.com/gradient-editor/

How to display a background image as hover effect in a CSS Button?

I have a CSS3 Gradient button and I'm trying to display a background image (small radial glow to be exact) inside of my button as a hover state. Since my button normal state is already taking up the 'background' tag, when I linked the background image in the hover, the CSS3 gradient effect disappeared when I hovered over it. I tried using background-image tag for the hover, but it didn't work.
Is there a method where I can display the hover background image on top of the normal state when it's hovered?
CSS:
.submit {
background: rgb(254,219,130); /* Old browsers */
background: -moz-linear-gradient(top, rgba(254,219,130,1) 0%, rgba(255,183,50,1) 24%, rgba(255,164,10,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,219,130,1)), color-stop(24%,rgba(255,183,50,1)), color-stop(100%,rgba(255,164,10,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fedb82', endColorstr='#ffa40a',GradientType=0 ); /* IE6-9 */
}
.submit:hover {
background-image: url(images/glow.png) center no-repeat;
}
HTML:
<button class="submit">Button</button>

Unlike aninput element, the button element can contain other elements, so the easiest way is to simply nest a span within the button and apply the 'glow' to that element:
<button class="submit"><span>Button</span></button>​
.submit:hover span {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}​
JS Fiddle demo.
I didn't have access to your own image, so I used a a CSS gradient image generator as a substitute. Obviously substitute your own relevant image back in.
Using a second background-image:
With the introduction of CSS3, an element can have multiple backgrounds using a comma-separated list (as with, for example, the font-face declaration), which allows for the following:
.submit:hover {
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), -moz-linear-gradient(top, rgba(254,219,130,1) 0%, rgba(255,183,50,1) 24%, rgba(255,164,10,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,219,130,1)), color-stop(24%,rgba(255,183,50,1)), color-stop(100%,rgba(255,164,10,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), -webkit-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), -o-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), -ms-linear-gradient(top, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%), linear-gradient(to bottom, rgba(254,219,130,1) 0%,rgba(255,183,50,1) 24%,rgba(255,164,10,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}​
JS Fiddle demo.
I've not defined a second background under the filter property, because I honestly don't know if Microsoft's older browsers would understand the second value, or simply discard the entire rule.

Resources