So, I understand that this is the code for splitting the background in two colors:
#top,
#bottom {
position: fixed;
left: 0;
right: 0;
height: 50%;
}
#top {
top: 0;
background-color: orange;
}
#bottom {
bottom: 0;
background-color: green;
}
The source of this can be visualized here: http://dabblet.com/gist/2870276.
On my website, rather than 50% and 50%, I have 30% and 70%. How do I make it so that when the browser is adjusted to shrink horizontally, the top 30% doesn't stay at 30% but at the height of the original?
I suggest using a gradient instead of document elements for background effects like this.
Try this:
body {
background-image: linear-gradient(to bottom, orange, orange 50%, green 50%, green);
background-size: cover;
background-repeat: no-repeat;
}
Note that you'll need to make the body element fill the page:
html, body {
margin: 0;
height: 100%;
}
Here is my example: http://dabblet.com/gist/4ba4bde188af953dcdcc
That said, I don't understand what you mean by "shrinking horizontally" or "height of the original" - I hope I've answered what you're looking for.
Update:
According to Albert in the comments the OP wants the 30% to be relative to the height of the viewport when the page is loaded. This is doable, but must be done through JavaScript. I'll give a pure JS implementation without using jQuery.
window.addEventListener("DOMContentLoaded", setBodyGradientOnLoad);
function setBodyGradientOnLoad() {
var heightPx = window.innerHeight;
var gradientStop = Math.floor( heightPx * 0.3 );
var body = document.getElementsByTagName("body")[0];
body.style.backgroundImage = "linear-gradient(to bottom, orange, orange " + gradientStop + "px, green " + gradientStop + "px, green)";
}
Note that you still need the rest of the CSS to apply the background-size and background-repeat options, as well as to provide a fallback for browsers with JavasScript disabled.
Note that my use of "DOMContentLoaded" and the un-prefixed linear-gradient means this will only work in modern browsers (IE 9+, Safari 3.1+ - 2010 or later, basically)
I would suggest to not use two elements to do so. Only use one and set a "split background-color" like so. By the way, doing this purely with CSS will make it responsive to all screen resizing.
I solved this purely with CSS, and with NO EXTRA DOM ELEMENTS! This means that the two colors are purely that, just background colors of ONE ELEMENT, not the background color of two.
I used a gradient and, becuase I set the color stops so closely together, it looks as if the colors are distinct and that they do not blend.
Here is the gradient in native syntax:
background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
Color #74ABDD starts at 0% and is still #74ABDD at 49.9%.
Then, I force the gradient to shift to my next color within 0.2% of the elements height, creating what appears to be a very solid line between the two colors.
Here is the outcome:
And here's my JSFiddle!
Have fun!
Just use Javascript! Convert the "%" to "#pixels" right when the page loads, and then never convert it again, so that even when the user adjusts the size of their page, the height is constant, 30% of what the original height of the page was, not the new height of the page.
(*Note: This won't work on Dabblet.com since it doesn't support Javascript.. here is a JSFiddle version of it operational. http://jsfiddle.net/x35o09m1/ )
<html>
<head>
<div id="bottom" style="position: fixed; left: 0; right: 0; bottom: 0; height:100%; background-color: green;">bottom - 70%</div>
<div id="top" style="position: fixed; left: 0; right: 0; top: 0; background-color: orange;">top - 30%</div>
<script type="text/javascript">
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
document.getElementById("top").style.height = (y*0.3)+"px";
</script>
</head>
</html>
You can always use pixels instead of percentages if you want to keep a particular background color fixed. If its a navigation section you're trying to keep fixed in place, though, you can also use Bootstrap. Here is an example of a fixed nav block: http://startbootstrap.com/templates/freelancer/
I will go on and answer the question, affecting the OP code minimally:
#top{
position: fixed;
left: 0;
right: 0;
height: 30%;
}
#bottom {
position: fixed;
left: 0;
right: 0;
height: 70%;
}
#top {
top: 0;
background-color: orange;
}
#bottom {
bottom: 0;
background-color: green;
}
Related
I have the image in the correct folder but I want to add a text box on top of an image and I was told the best way to do it is make the image a background image, but when I followed a tutorial it never appeared?
anyway here is my html
<div class="module">
<h2>blah blah</h2>
</div>
and my CSS
.module {
margin: 10px;
width: 1530px;
height: 717px;
display:block;
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
background-size: cover;
position: relative;
}
h2 {
position: absolute;
bottom: 100px;
left: 100px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px PTSans;
}
the image is full width of the screen so I am using container-fluid in bootstrap and the text box will be in the middle of the image.
You may call the local file as background like this:
background: url("file://PATH-TO/file.jpg");
Keep in mind that the string inside parentheses should provide a URL to the file.
Also, you have the option to put a path in it.
background: url("PATH-TO/file.jpg");
Change the backlashes. From this...
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
To this
background: url('C:/Users/Jason/Desktop/champions/images/shop.png');
Cheers.
It looks fine of your css. Try to use firefox or chrome debugger to check if the background image can be loaded or not. Try to change the value of the background-size. Sometimes the background image is too large that you can only see part of it (which may be completely white) on the screen.
Your path is wrong
try this: url('images/shop.png') - if your css is in champions
How can I tint a background image that has transparent sections?
I have tried using background-blend-mode: multiply with background-image and background-color. It works great for opaque images, but does not take the transparency into account, leaving a colored square around the image.
I am using svg images, and could switch to using <img> instead of backgrounds if necessary.
Example:
Left side is my goal, right side is what I get with background-blend-mode: multiply. The base image is a light gray circle, and I multiplied it with red.
Edit: I created a codepen to better illustrate my problem and what I have tried. http://codepen.io/anon/pen/QbbbpZ It has both the original image and my goal (made in Photoshop) on top, with examples of what I have tried below.
Edit2: I'm beginning to wonder if it is even possible to do this with plain HTML/CSS. Would using something like canvas, maybe with shaders, be more appropriate? Is there a library out there for it?
In webkit (Safari, Chrome and Opera) you can use -webkit-mask-image to do the effect.
html:
<div id="blend-mask" class="uiElement uiBG"></div>
css:
#blend-mask {
-webkit-mask-image: url("http://i.imgur.com/JLjAor5.png");
background-color: #f00;
background-blend-mode: multiply;
}
#goal {
background-image: url("http://i.imgur.com/JLjAor5.png");
}
#pageBG {
width: 400px;
height: 400px;
background-image: url("http://lorempixel.com/g/400/200/");
background-color: rgba(255,0,0,0.25);
background-blend-mode: multiply;
color: white;
text-shadow: 0 0 0.25em black;
}
.uiElement {
width: 100px;
height: 100px;
margin: 25px;
display: inline-block;
}
.uiBG {
background-size: contain;
background-repeat: no-repeat;
background-image: url("http://i.imgur.com/rkRJbzH.png");
}
Example working:
http://codepen.io/anon/pen/vONVry
if you want to make it work as well in firefox check this post maybe will help:
Is there a -moz-mask CSS property, like -webkit-mask-image?
As well you can check using canvas to tint, there is this post that maybe can help:
http://www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/
I'm currently working on a project that involves a circle being randomly filled with a color to a certain point. I used a div with border-radius to create the circle + overflow:hidden and another div to imitate the 'filling'.
See JSFiddle
HTML:
<div class="circleswrap">
<div class="circlediv">
<div class="circle">
<div id="animateddiv1">
</div>
</div>
</div>
</div>
CSS:
.circle {
position: relative;
border-radius: 50%;
-o-border-radius: 50%;
overflow: hidden;
background: #8a8a8a;
width: 165px;
height: 165px;
display: inline-block;
margin: 0 75px;.
}
#animateddiv1 {
background: #63B23A;
position: absolute;
top: 130px;
width: 200px;
height: 165px
}
Awesome works great in my browsers BUT i have to get it to work on a outdated Opera browser which is integrated into a smart display monitor (and practically un-updateable).
As we all know the older versions of Opera did not support the combination of border-radius + overflow:hidden + position: relative/absolute
PS: I Know -o-border-radius is not a 'thing' but i tried it nontheless... a man can always dream :^)
I've been trying to find a solution but i'm out of ideas.
I hope this wonderful community can help me out :)
This is a bit of a shot in the dark, as i don't know the version of opera required. But you can try to use a background-image: linear-gradient();
like this:
setInterval(function () {
var percentage = Math.floor(Math.random() * 100);
$(".circle").css("background-image", 'linear-gradient( 0deg, #63B23A ' + percentage + '%, #8a8a8a ' + percentage + '%' + ' )')
}, 3000);
This seems to be supported from Opera 11.1
Of course don't foget the browser prefix -o-
So the code could look like this:
setInterval(function () {
var percentage = Math.floor(Math.random() * 100);
$(".circle").css("background-image", '-o-linear-gradient( 0deg, #63B23A ' + percentage + '%, #8a8a8a ' + percentage + '%' + ' )')
}, 3000);
here is a demo: http://jsfiddle.net/05dkfoxj/2/
Good luck.
The CSS clip-path property lets you specify an SVG shape to use as a mask for HTML content; that is probably the canonical way to do this moving forward.
I assume the version of Opera you're using is too old to support this property, or probably anything else that does what you want in a non-hacky way. If the circle is on a solid colored background, you could superimpose an opaque mask of the same color, i.e. a PNG with a circle cut out of it. More ambitiously, you might be able to use something like this technique to generate the image dynamically on a canvas, which (if it works) would allow for non-solid backgrounds. That would be complicated, though, and probably not feasible if any of the elements involved need to respond to pointer events.
Alternatively, if the content of the circles is just a picture, and not interactive, you could use a canvas to render the entire thing. Even quite old browsers should handle that, and CanvasRenderingContext2D knows how to clip drawing to a shape.
If the circle is against a solid background like in your example, you could create a PNG or SVG with the same colour background with a circle cut out and use it as an overlay. Remove the .circle element and place the image in .circlediv. It should give you the same effect as what you have.
.circlediv
{
width: (image width)
height: (image height)
postition: relative;
}
svg, png
{
z-index: 2;
width: 100%;
height: 100%;
position: absolute;
/* rest of your styling */
}
#animateddiv1
{
z-index:1;
position: absolute;
bottom:0;
width:100%;
/* rest of your styling */
}
I always tend to do this sort of thing because I know it'll work, even though I'd prefer to do it your way. You'll have issue in older versions of IE using border-radius, if you're supporting them.
I am wondering if it is possible to change the brightness of:
body{
background-image:url();
}
Using HTML/CSS. The reason I would like to change it, is because I just spent a rather long time making the image, but when I put it on website, it is suddenly about twice as bright. I have compared the original file and the file that is input into the website and they are both very much different colours of blue.
Is there any reason for this, and is there a way I can change the brightness?
Thanks.
You can have more layers in the "background" like this:
.someObj{
background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
url(myBgImage.png);
}
This will put 50% white over the original image making it brighter.
Linear-gradient function has to be used, otherwise it doesn't work.
Alternatively use:
.someObj:after{ content:''; background:rgba(255,255,255,.5); ... }
and this is better for code maintainability.
This would be an option, but it's not very practical and wouldn't work in older browsers:
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: rgba(0,0,0,0.1);
pointer-events: none;
}
Or for even better color control, try hsla() colors:
body:after {
content: "";
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
background: hsla(180,0%,50%,0.25);
pointer-events: none;
}
Really, it's better to play with the image in a image editor until you get the browser result you want.
There is no way to do this that works in every browser, but if you want, you can do it in webkit browsers (Chrome, Safari, Opera), by using the filter style:
img.lessBright {
-webkit-filter: brightness(0.8);
filter: brightness(0.8);
}
That results in the brightness being reduced to 80% in webkit browsers. I do recommend just saving another version of your image if you want to do this though.
Create a child div for the background image of the same dimensions.
Set the child divs background colour with RGBA, which includes an alpha channel (opacity).
Set the opacity accordingly between 0 and 1. 1 = Opaque, 0=Transparent, 0.5 =Translucent
HTML:
<div id="primary_feature">
<div class="feature"></div>
</div>
CSS:
#primary_feature{
background-image: url("../assets/images/misc/laptop.png");
}
.feature{
background:rgba(0,0,0,0.6);
}
An update to the other answer.
You can also use the Backdrop Filter for a much better effect. It can use any filter, in this case, the brightness filter.
This means your background will not be washed-out with a colour over the top, rather it will affect the background directly for a sharper more natural look while retaining all detail.
The downside, it isn't currently supported in Firefox, unless experimental settings are turned on. But that should change soon and as of writing this, Firefox is only 6.5% of the market.
however, it is fully supported in Chrome
body {
content: "";
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
backdrop-filter: brightness(120%);
pointer-events: none;
}
I placed a black canvas over the image and changed the brightness:
c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(0,0,c.width,c.height); //as image size
ctx.fillStyle = "#000000" + brightness;
ctx.fill();
I had the same problem, but it was with a Gif.
My workaround:
I made a very small black square image in PowerPoint and set its transparency to 50% and saved it as a file called "dimmerswitch.png"
Than I referenced that one first in the code:
body {
background-image:url("dimmerswitch.png"), url("YourImage.png");
}
You just do Photoshop to reduce the brightness if there's no other way.
When you go to the page http://m.google.com using Mobile Safari, you will see the beautiful bar on the top of the page.
I wanna draw some trapeziums (US: trapezoids) like that, but I don't know how. Should I use css3 3d transform? If you have a good method to achieve it please tell me.
As this is quite old now, I feel it could use with some new updated answers with some new technologies.
CSS Transform Perspective
.trapezoid {
width: 200px;
height: 200px;
background: red;
transform: perspective(10px) rotateX(1deg);
margin: 50px;
}
<div class="trapezoid"></div>
SVG
<svg viewBox="0 0 20 20" width="20%">
<path d="M3,0 L17,0 L20,20 L0,20z" fill="red" />
</svg>
Canvas
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(30, 0);
ctx.lineTo(170, 0);
ctx.lineTo(200, 200);
ctx.lineTo(0, 200);
ctx.fillStyle = "#FF0000";
ctx.fill();
<canvas id="myCanvas" width="200" height="200"></canvas>
You can use some CSS like this:
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
<div id="trapezoid"></div>
It is really cool to make all this shapes, Take a look to more nice shapes at:
http://css-tricks.com/examples/ShapesOfCSS/
EDIT:
This css is applied to a DIV element
Simple way
To draw any shape, you can use the CSS clip-path property like below.
You can use free online editors to generate this code (ex: https://bennettfeely.com/clippy/)
.trapezoid {
clip-path: polygon(0 0, 100% 0, 84% 41%, 16% 41%);
}
With reusable code
If you want it more adaptative, you can define a Sass mixin like :
#mixin trapezoid ($top-width, $bottom-width, $height) {
$width: max($top-width, $bottom-width);
$half-width-diff: abs($top-width - $bottom-width) / 2;
$top-left-x: 0;
$top-right-x: 0;
$bottom-left-x: 0;
$bottom-right-x: 0;
#if ($top-width > $bottom-width) {
$top-left-x: 0;
$top-right-x: $top-width;
$bottom-left-x: $half-width-diff;
$bottom-right-x: $top-width - $half-width-diff;
} #else {
$top-left-x: $half-width-diff;
$top-right-x: $bottom-width - $half-width-diff;
$bottom-left-x: 0;
$bottom-right-x: $bottom-width;
}
clip-path: polygon($top-left-x 0, $top-right-x 0, $bottom-right-x $height, $bottom-left-x $height);
width: $width;
height: $height;
}
And then use it for the desired element like this (here parameters are $top-width, $bottom-width, $height) :
.my-div {
#include trapezoid(8rem, 6rem, 2rem);
}
This is an old question... but I want to add a method that has not been mentioned. It is possible to draw triangles with gradients of half color half transparent, and then it is possible to build a trapezoid from 3 gradient shapes. Here is an example code, the 3 blocks drawed in different colors for better understanding:
#example {
width: 250px;
height: 100px;
background-image:
linear-gradient(to top left, red 0 50%, transparent 50% 100%),
linear-gradient(to top right, green 0 50%, transparent 50% 100%),
linear-gradient(blue 0 100%);
background-size:
20% 100%, 20% 100%, 60% 100%;
background-position:
left top, right top, center top;
background-repeat: no-repeat;
}
<div id="example"></div>
You have a few options available to you. You can just plain use an image, draw something with svg or distort a regular div with css transforms. An image would be easiest, and would work across all browsers. Drawing in svg is a bit more complex and is not guaranteed to work across the board.
Using css transforms on the other hand would mean you'd have to have your shape divs in the background, then layer the actual text over them in another element to that the text isn't skewed as well. Again, browser support isn't guaranteed.