code below works in firefox, chrome, etc., but not in Internet Explorer. How to make background to cover browser window, even if there is not much text.
body {
background: -ms-linear-gradient(top, #e5e5e5 0%, #c0bfbf 100%) center center fixed; /* IE10 Consumer Preview */
background: -moz-linear-gradient(top, #e5e5e5 0%, #c0bfbf 100%) center center fixed; /* Mozilla Firefox */
background: -o-linear-gradient(top, #e5e5e5 0%, #c0bfbf 100%) center center fixed; /* Opera */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e5e5e5), color-stop(1, #c0bfbf)) center center fixed; /* Webkit (Safari/Chrome 10) */
background: -webkit-linear-gradient(top, #e5e5e5 0%, #c0bfbf 100%) center center fixed; /* Webkit (Chrome 11+) */
background: linear-gradient(to bottom, #e5e5e5 0%, #c0bfbf 100%) center center fixed; /* W3C Markup, IE10 Release Preview */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5', endColorstr='#c0bfbf',GradientType=0, sizingMethod='scale'); /* IE6-8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5', endColorstr='#c0bfbf',GradientType=0, sizingMethod='scale')"; /* IE6-8 */
color:#393939;
font:12px/18px Arial,sans-serif;
margin:0;
padding:0px;
}
When you replace the hex codes with rgb values in the linear-gradient tag without the ms-prefix it works in IE10 on windows 8 at least
Here's what I used:
background: linear-gradient(to bottom, rgb(255,255,0) 0%, rgb(0,255,255) 100%) center center fixed; /* W3C Markup, IE10 Release Preview */
Edit, here's the example with your actual color values in it:
background: linear-gradient(to bottom, rgb(229,229,229) 0%, rgb(192,191,191) 100%) center center fixed;
Related
I have a design that requires white background, but the top 100px needs to be without background. So what I did, I used margin-top to push down div that has the white background and put another div inside of this div and pulled it up using negative of what I used to push the first one down. It works fine. But because of this, I have 100px of unused space below and I need to get rid of it. How can I achieve it?
<div id="container">
<div id="margin-top" style="margin-top: 100px;">
<div id="negative-top" style="position: relative; top: -100px;">
content
</div>
</div>
<div>
Try this method, it will work for you.
<div id="container">
<div id="margin-top" style="margin-top: 100px;">
<div id="negative-top" style="margin-top: -100px; padding-top: 100px">
content
</div>
</div>
<div>
You can also use gradient instead of background-color on your body and get rid of negative margin.
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 20px, #000000 20px, #000000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 20px,#000000 20px,#000000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 20px,#000000 20px,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
This might not be the best title, but I am having a hard time trying to find the appropriate one. Basically, what I need is to have a two-color background image, with the breakpoint set to a specific position.
Here's what I have right now:
Which can be tested in this jsfiddle.
And this is what I am trying to achieve:
One thing though, is that the slant in this bar needs to be aligned with the logo, as shown below:
If there was no slant, this might be easier, but I have not found a way to achieve the desired behavior. What I tried doing was creating a div with a background color, and inside that div, a second one that would be placed on top containing the image.
<div class="line-container">
<div class="line">
</div>
</div>
.line-container{
width: 100%;
background-repeat: repeat-x;
background-color: #009b3a;
}
.line{
background-image: url('http://s8.postimg.org/fc0umdjut/image.png');
display: block;
width: 50m;
margin: 0 auto;
height: 10px;
}
But position and color to the sides are wrong, as shown in this jsfiddle:
Any advise?
Seems like a job for a gradient.
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(45deg, #1e5799 0%, #1e5799 48%, #2989d8 48%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #1e5799 0%,#1e5799 48%,#2989d8 48%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #1e5799 0%,#1e5799 48%,#2989d8 48%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
Simply add this to your css class and change the colors within accordingly.
Even though the accepted answer is great, I wanted to share an alternative to using gradients.
Here's an option using the ::before pseudo-class with a CSS border trick to get the angled portion. You can adjust the "angle" by tweaking the border widths. The width property on the pseudo-element can be adjusted, as needed.
div {
background: green;
height: 10px;
position: relative;
}
div:before {
background: darkgreen;
border: solid transparent 0;
border-bottom-width: 10px;
border-right-color: green;
border-right-width: 10px;
box-sizing: border-box;
content: '';
height: 10px;
position: absolute;
width: 5em;
}
<div></div>
I have a website with body containing fix background image and a div class containing transparent radial-gradient layer. How do I make the elements within the class to not be transparent and appear on top of the background gradient and background image?
CSS:
$body-color1: #f2009f;
$body-color2: #218bdb;
// Solution 1. However, unable too get content on top of gradient and backgourn image
html { min-height:100%; } /* to get the gradient to stetch to the bottom of the view port */
body {
background: $body-color2;
background: url('http://i.huffpost.com/gen/964776/thumbs/o-CATS-KILL-BILLIONS-facebook.jpg') no-repeat center center fixed;
background-attachment: fixed;
// background-size: cover;
}
.bg-img {
background: -moz-radial-gradient(center, ellipse cover, $body-color1 0%, $body-color2 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0 $body-color1), color-stop(100%,$body-color2)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, $body-color1 0%,$body-color2 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, $body-color1 0%,$body-color2 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, $body-color1 0%,$body-color2 100%); /* IE10+ */
background: radial-gradient(center, ellipse cover, $body-color1 0%,$body-color2 100%); /* W3C */
opacity: 0.5;
z-index: 0;
}
HTML:
<div class="bg-img">Insert large body of text here or elements.</div>
http://codepen.io/anon/pen/NPeqMJ
Change your body colors to:
$body-color1: rgba(242, 0, 159, 0.5);
$body-color2: rgba(33, 139, 219, 0.5);
and remove opacity from .bg-img
Demo
for putthe element on the top, you can use the z-index property. Be sure that the value is large enough to preventother element to come at top
z-index: 99999;
This has been eating away at my for the past day. What i want to achieve is when the users monitor is viewed at 1100px or less, it only shows a solid background color. When it exceeds that width, a left and right gradient aligned always at the left and right furthest appear, but are not ever shown if the screen size does not exceed 1100px.
Here is an example of what i am trying to do:
I tried setting up 3 divs, but that doesnt seem to work as show in the JSFiddle below. Any tips or suggestions?
JSFiddle
<div></div>
Try adding a gradient to the .left and .right divs and hide them when the screen width is below 1100px.
As an example:
Gradient from dark -> light
.left {
min-width: 300px;
height: 100%;
background: #000000;
float: left;
background: #000000;
/* Old browsers */
background: -moz-linear-gradient(left, #000000 0%, #ffffff 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #000000), color-stop(100%, #ffffff));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #000000 0%, #ffffff 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #000000 0%, #ffffff 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #000000 0%, #ffffff 100%);
/* IE10+ */
background: linear-gradient(to right, #000000 0%, #ffffff 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff', GradientType=1);
/* IE6-9 */
}
Grandient from light -> dark
.right {
width: 300px;
height: 100%;
background: #ffffff;
/* Old browsers */
background: -moz-linear-gradient(left, #ffffff 0%, #000000 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(100%, #000000));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ffffff 0%, #000000 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ffffff 0%, #000000 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #ffffff 0%, #000000 100%);
/* IE10+ */
background: linear-gradient(to right, #ffffff 0%, #000000 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=1);
/* IE6-9 */
background-color: #000;
float: right;
}
(The above gradients are generated from http://www.colorzilla.com/gradient-editor/)
Then an #media query to hide them below 1100px
#media (max-width: 1100px) {
.left, .right {
display: none;
}
}
DEMO
Hope this helps!
There are so many methods to achieve what you're trying to do. I'll post the most obvious and leave the intense answers for those who understand your question better.
Your first bet is it to center a div layer using:
.myDiv {
margin: 0 auto;
background-image: url(assets/mybg.jpg);
background-position: top center;
}
Basically, you'll take your background image (with that gradient) and center it, and then center your div layer.
Your background should be made in Photoshop/GIMP/Paint.net/Whateverprogram and the solid color should be 1100px wide. Then the gradient should span the remaining area outside the solid.
My next option for you is to actually do this in jquery. We'll design it so that the div has the gradient until the viewport 1100px or less and it'll transition that background image to a different background image:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
function widthCalculator(wrapper, changeWidth){
var wrapperWidth = $(wrapper).width();
if (wrapperWidth <= changeWidth) {
$(wrapper).css("background-image", "url(Assets/mybackground2.jpg)");
} else {
$(wrapper).css("background-image", "url(Assets/mybackground1.jpg)");
}
}
widthCalculator('#wrapper', 1100);
$(window).resize(function(){ widthCalculator('#wrapper', 1100); });
});
</script>
<style>
body {
background-color:red;
margin: 0 auto;
width: 100%;
height: 5000px;
}
#wrapper {
background-color:white;
width: 100%;
height: 100vh;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
The jquery method isn't the best solution, because upon resize, it loads a new background. If you're desperate, and looking for a quick fix, this will work for you.
Alright, so I have some issues with an HTML page that I'm coding. The page (so far) only has a table on it that's 700px wide and 50px tall. I want to use a gradient for the background that rises from the bottom of the page to the center of the page (50%).
On my stylesheet, I have the following set under the body tag:
body {
background-image: url('./bg.png');
background-position: bottom;
background-repeat: repeat-x;
background-color: white;
background-size: auto 50%;
}
Unfortunately, background-size counts for how much space is taken up by HTML elements, so the size would be 50% of the height from the top of the page to the bottom of my 50px tall table. So, the background ends up being about 30px tall.
Also, the background does not position itself at the bottom of window. Instead, it positions itself at the end of the page content (at the bottom of my table).
I've been rattling my brain around this for the past few hours. I'm redesigning a website I did a few years ago in hopes of bringing it back (the old design was decent, but the code was pretty messy).
All help would be appreciated. Thanks!
I'm using Chrome v31.0.1650.57 m.
Have you considered using a gradient generator as opposed to an image? It might make your life a little bit easier :) You wont have to worry about repeat/background size, etc
http://www.colorzilla.com/gradient-editor/
Your body inherits the size of its only parent element, html, so you have to set the size of both in order to get what you're looking for:
html {
width: 100%; # of the browser window
height: 100%; # of the browser window
}
body {
width: 100%; # of html
height: 100%; # of html
}
Then, as Digiguin said, just use a CSS3 gradient background to get what you want, perhaps like this:
body {
width: 100%;
height: 100%;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #2989d8 50%, #1e5799 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#ffffff), color-stop(50%,#2989d8), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 50%,#2989d8 50%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#ffffff 50%,#2989d8 50%,#1e5799 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#ffffff 50%,#2989d8 50%,#1e5799 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%,#2989d8 50%,#1e5799 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
}
Alternatively, you could set the above styles on html instead of body.
What it looks like:
Change it to the <html> background and add height: 100%:
html {
background-image: url('./bg.png');
background-position: bottom;
background-repeat: repeat-x;
background-color: blue;
background-size: auto 50%;
height: 100%;
}