I need to place three different background images inside a div. At the top I want blue.png, then in the middle yellow.png (with repeat-y), and finally, red.png at the bottom.
So far, I have this Fiddle: http://jsfiddle.net/nwUPU/1437/. My problem is that yellow.png covers both blue.png and red.png. What am I doing wrong, please?
This example is used in responsive design. I do not know the width and height of the images.
.colors {
width:600px;
height:600px;
position: relative;
z-index: 2;
background: url("http://s9.postimg.org/47v6naitr/blue.png") center top no-repeat, url("http://s1.postimg.org/fgv3q86i7/red.png") center bottom no-repeat;
background-size: 100%;
}
.colors:before {
content: '';
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url("http://s24.postimg.org/hyhdhfg51/yellow.png") center top repeat-y;
background-size: 100%;
}
It is possible to add multiple backgrounds to the same element by providing them as coma separated values to the background property. Each background image that is provided will be added as a layer and will be stacked one on top of another (also depending on the background-position).
The key things to note here are:
When multiple backgrounds are applied to the same element, the first one is the top-most layer and the one provided last is the lower-most layer. Since we need the yellow to be sort of below the red and blue, it should be provided as the last value.
To position the blue and red images at their respective positions, background-position should be set appropriately. Since blue should be the first from top, it should be positioned at 0% 0% and since the red needs to be last from top, it should be positioned at 100% 100%.
.colors {
width: 600px;
height: 600px;
position: relative;
background: url("http://s9.postimg.org/47v6naitr/blue.png") center top no-repeat,
url("http://s1.postimg.org/fgv3q86i7/red.png") center bottom no-repeat,
url("http://s24.postimg.org/hyhdhfg51/yellow.png") center top repeat-y;
background-size: 100%;
background-position: 0% 0%, 100% 100%, 0% 0%;
}
<div class="colors"></div>
Possibly add three divs inside your first. each with their own .png?
<div>
<div id="blue" style="z-index: 1;"><img src="blue.png"></div>
<div id="yellow"style="z-index: 2;"><img src="yellow.png"></div>
<div id="red" style="z-index: 1;"><img src="red.png"></div>
</div>
Related
I am currently using an image tag within a div to display a site header. A new feature request has come up that would require us to keep several different versions of this same image with different lighting, and then show one image on the left of the header with a soft transition to the other image on the right. Even better if we can use 3 or more images.
An example is below using an old 3D render of mine. Imagine we have one sunset image, one daytime image, and want to create the image below using nothing but them and CSS. The original images can be found at the below addresses if you'd like to use them in a fiddle:
http://nightscapecreations.com/Image_Folder/800x600_Paradise_Shore.jpg
http://nightscapecreations.com/Image_Folder/800x600_Paradise_Shore_Sunset.jpg
For those who cannot see the example and need further clarification: The images are all 800 pixels wide. The final result should be an 800 pixel wide image. The left of the resultant image should be image-1, the right should be image-2, and in the center they should fade. I would expect this to be possible with CSS background-image and linear-gradient somehow, but my searches have turned up oddly empty. Is this possible with CSS?
A solution using mask image (with a very low support)
.base {
width: 600px;
height: 400px;
position: relative;
background-image: url(https://i.stack.imgur.com/0bIJu.jpg);
background-size: cover;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url(https://i.stack.imgur.com/ohVd6.jpg);
background-size: cover;
-webkit-mask-image: linear-gradient(to left, transparent, white);
}
<div class="base"><div class="overlay"></div></div>
And another solution using blend mode. This one, as it is, is supported in most modern browser. (With the usual exception of Edge). I have added an animation on hover.
I believe there is a slight issue involving probably the gamma calculation, there are locations where the result is darker than it should be. I have tried to fix it make the gradient lighter.
.container {
width: 600px;
height: 400px;
position: relative;
}
.container div {
width: 100%;
height: 100%;
position: absolute;
}
.container:hover div {
animation: slide 6s infinite;
}
.image1 {
background-image: linear-gradient(to right, black 33%, #444 40%,#ddd 60%, white 66%), url(https://i.stack.imgur.com/0bIJu.jpg);
background-size: 300% 100%, cover;
background-position: center center, center center;
background-blend-mode: multiply;
}
.image2 {
background-image: linear-gradient(to left, black 33%, #444 40%,#ddd 60%,white 66%), url(https://i.stack.imgur.com/ohVd6.jpg);
background-size: 300% 100%, cover;
background-position: center center, center center;
background-blend-mode: multiply;
mix-blend-mode: screen;
}
#keyframes slide {
from { background-position: left center, center center;
}
to {background-position: right center, center center;}
}
<div class="container">
<div class="image1">
</div>
<div class="image2">
</div>
</div>
mask-image is solution to your problem, however it is currently only supported by webkit
if you want to have cross-browser solution I suggest you use SVG instead
Need some help with CSS background repeat. Below is the wire-frame for the functionality I am trying to achieve.
Current Code:
HTML:
<div class="wrapper">
<div class="container"></div>
</div>
CSS:
.container{
min-height: 10000px;
background-image: url(background1.png), url(background2.png);
background-repeat: no-repeat, repeat-y;
background-position: center top, center 1000px;
}
The current code displays background1 only one time and repeats background2 as I want,but the background2 image starts from the top of the page. I want it to start exactly after the background1 image ends as shown in the wireframe.
NOTE: Both the images background1 and background2 have transparent shapes in them which makes makes the other image visible in the background.
If you set a background to repeat, it can not be limited (AFAIK)
the solution would be to limit it to a pseudo element, and limit this pseudo element to where you want it (with the top property)
.test {
width: 300px;
height: 600px;
border: solid black 1px;
position: relative;
}
.test:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 200px;
background-image: url(http://placekitten.com/g/600/400);
background-repeat-y: repeat;
}
<div class="test"></div>
Note that the height of 100% is not accurate, if you want it to be accurate set it to your dimension
I have a div spanning the whole height of the viewport, while being horizontally center-aligned through use of margins, and would like to center a red square of, say, a 100px by 100px in that div just using CSS. Background-color: red wouldn't work, because that will span the whole div, which will be bigger than 100 pixels. I currently have the following solution:
div {
background-image: linear-gradient(to right, red, red);
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center;
}
It works, because there's no shift in gradient, but using linear-gradient in this way seems sort of hackish, which makes the solution less useable. Is there any way to generate a purely red square of some size smaller than the div without resorting editing the HTML of the page, or resizing the div with CSS? Preferably, I would also like to avoid scaling up an image of 1 red pixel (I wouldn't easily be able to change the colour).
Thanks for reading!
You could use the :after pseudo selector to add a block with these dimensions. If you position it absolute you can center it using left, top and a transform.
.box {
position: relative;
}
.box:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
}
Or see http://codepen.io/ckuijjer/pen/CbduL
try this
html
<body>
<div id="div0">
<div id="div1"></hr>
</div>
</body>
css
#div1 {
width:100px;
height:100px;
background-color:red;
top: 50%;
transform: translateY(50%);
margin-right:auto;
margin-left:auto;
}
#div0{
height:500px;
width:100%;
background:white;
}
I would like to get the effect shown here:
http://jsfiddle.net/abalter/k8G3C/
The background image is transparent. The logo and text overlay.
The problem is, I want the background image to repeat-y. It's fine with a wide viewport, but when the viewport narrows, the text passes the bottom of the image.
If I do:
body {
background: url(...);
opacity: 0.6;
background-repeat: repeat-y;
}
then the background repeats in the y-direction, but all child elements become transparent as well. I have not found a way to make the image transparent without the child elements.
I'm formatting the background image such that it scales with the viewport, but is always centered -- the middle of the image is always in the middle. ("CSS-Only Technique #2")
Any suggestions?
appling opacity: 0.6; to body will make the whole page transparent. Change img to div like this :
HTML:
<div id="background-image"></div>
Css : now you need to set the size of the background-image to 100% on the x-achse and auto to the y-achse and ad a z-index:0;
#background-image {
background-image: url(http://www.arielbalter.com/BuzzJoy/img/green_and_roasted_half_and_half.jpg);
width: 100%;
top: 0;
left: 0;
height:100%;
opacity: 0.6;
position: fixed;
background-repeat: repeat-y;
background-size: 100% auto;
padding: 0;
margin: 0;
z-index:0;
}
Demo:http://jsfiddle.net/k8G3C/4/
If I want to have a blue bar in the background at the top of my webpage (so the body element's background), but I want it to be 100px in height and span the entire horizontal background... is there any way to do this without making a background image that is 100px with the color I want (and maybe 1px in width) and making it repeat-x?
Basically, rather than doing:
background: url("images/pagestripe.png") repeat-x;
I want to do this:
background: #FFCCFF 100px top left repeat-x;
Which would give me a 100px background of the color #FFCCFF that starts in the top left of the page and repeats horizontally.
Similarly, if I wanted it to repeat-y, it would make the 100px the width instead of the height.
The positioning markers can represent offsets...
Is this possible? Is there actual CSS code for what I am looking for? Perhaps I'm not far off...
You can do it using linear gradients:
body {
background-image: -moz-linear-gradient(top, blue 100px, transparent 0);
background-image: -o-linear-gradient(top, blue 100px, transparent 0);
background-image: -webkit-linear-gradient(top, blue 100px, transparent 0);
background-image: linear-gradient(top, blue 100px, transparent 0);
}
Edit: This is CSS3 only. For CSS2 you may try
body:before {
content: ' ';
display: block;
top: 0;
position: absolute;
height: 100px;
width: 100%;
background: blue;
}
You could make the bar a separate div and set a negative margin on it. Something like this:
<div id="bluebar"></div>
Content goes here...
And then in CSS:
div#bluebar {
background: #fcf; /* that's actually pink, but whatever... */
height: 100px;
margin-bottom: -100px;
}
I'd give a jsFiddle link, but they're apparently down for maintenance right now, so here's a simple static HTML demo instead.
Yes it can be done.
You can create a single full width element with the height and background color you desire.
Use CSS to position the element.
div#bluebar {
background: #acf;
display: block;
height:100px;
width:100%;
position: absolute;
top: 0px; /* however far from the top you would like it*/
left: 0px;
z-index: 10; /* or some other number that will place it below the appropriate elements */
}
Just be sure that the parent of #blubar does not have position:relative; set or it will position relative to the parent not the document.