m trying to combine a scrollable gradient with a background-image that is fixed to the bottom of the screen within the same element.
.wrapper {
background-image: url('../resources/City_side3.png'), linear-gradient(to bottom, rgba(255, 205, 164, 1) 0%, rgba(159, 78, 117, 1) 50%, rgba(0, 0, 49, 1) 100%); /* W3C */
background-repeat: repeat-x;
background-position: bottom;
background-attachment: fixed;
height:auto !important;
height:100%;
min-height:100%;
}
my issue here is that the background-attachment also fixes the gradient, is there any way to fix the image seperately?
Related
I'm having an issue with my background image stretching beyond the screen resolution, but it seems to only happen on mobile landscape mode. Here is my css code;
#my-thing {
height: 100%;
background-color: rgb(10, 0, 0);
background-image: linear-gradient(rgba(100, 15, 15, 0.5) 5%, rgba(10, 0, 0, 1) 80%), url("assets/brickBackground.png");
background-repeat: repeat-x;
}
<div id="my-thing"></div>
The idea is that there is an image that is transitioned by a gradient into a solid background color. It works well on desktop and mobile, but not for landscape mode. The gradient fills the screen, but the image stretches beyond that when a scroll-y is introduced. I figure this is because of the image height, but I'm not sure how to do that properly without affecting the gradient or stretching the image normally. Media query? I'm not too sure.
I'm somewhat new to css so I apologize and do appreciate any help. Thank you.
New snippet with an image from: https://stackoverflow.com/a/19209651/125981
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
#my-thing {
height: 100%;
background-color: rgb(10, 0, 0);
background-image: linear-gradient(rgba(100, 15, 15, 0.5) 5%, rgba(10, 0, 0, 1) 80%), url("https://i.stack.imgur.com/aH5zB.jpg");
background-repeat: repeat-x;
}
<div id="my-thing"></div>
Try background-size: cover; Just one thing though. You are using repeat-x so are you sure the image is larger than it should be or is it simply repeating horizontally?
Try
#my-thing {
height: 100%;
background-color: rgb(10, 0, 0);
background-image: linear-gradient(rgba(100, 15, 15, 0.5) 5%,
rgba(10, 0, 0, 1) 80%), url("https://i.stack.imgur.com/aH5zB.jpg");
background-repeat: no-repeat;
background-size: cover;
}
I am trying to apply a radial-gradient circle with dimensions on top of a background image in css. Whenever I apply the gradient line, it doesn't do anything - my layers appear to be out of order.
/* HTML Styles */
html {
background-image: url("image1.jpg");
background-attachment: fixed;
}
/* Body Styles */
body {
background-image: url("image2.jpg");
background: radial-gradient(circle closest-corner at 40% 70%, white 15%,
rgba(151, 151, 151, 0.5) 50%);
}
You need to append them in the same background property as with your code you are overriding the first background-image and only the gradient is considered. Also be sure you respect the order, the first one will be the top layer.
body {
margin:0;
height:100vh;
background:
radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%),
url("https://lorempixel.com/400/200/") center/cover;
}
You can also use this syntax (the above one is the shorthand):
body {
margin:0;
height: 100vh;
background-image:
radial-gradient(circle closest-corner at 40% 70%, white 15%, rgba(151, 151, 151, 0.5) 50%),
url("https://lorempixel.com/400/200/");
background-size: auto, cover;
background-position:center;
}
I have two divs on top of each other. I need the bottom div to have a slanted angle like this:
I only need help with slant of the top of the blue div, I can handle to bottom slant myself.
I could create a psuedo element and skew it, but the issue is that the blue div has a gradient and making a psuedo element with the same gradient makes the two elements not flow together with their gradients.
I think my only solution is to create a transparent div, skew it and place it on top of the blue div. I was wondering if this is even possible to create a skewed transparent div and have it cut into the blue div, slanting the blue div while showing the image in the background.
I'm open to any other ideas to achieve this slanted div.
Ive created a simple jsfiddle with the divs for anyone to mess around with.
Here is the basic mark up:
<div class="main">
<div class="main-top">
</div>
<div class="main-bottom">
</div>
</div>
.main-top {
background: url("http://stock-wallpapers.com/wp-content/uploads/2015/01/Huawei_P7_home_wallpaper_02_.jpg") center center no-repeat;
background-size: cover;
height: 300px;
width: 600px;
}
.main-bottom {
height: 300px;
width: 600px;
background-image: -moz-linear-gradient( -51deg, rgb(28,35,80) 0%, rgb(27,31,71) 41%, rgb(25,26,62) 100%);
background-image: -webkit-linear-gradient( -51deg, rgb(28,35,80) 0%, rgb(27,31,71) 41%, rgb(25,26,62) 100%);
position: relative;
top: -150px;
}
Thanks
It is in fact very easy if you use this site
http://bennettfeely.com/clippy/
.main-top {
background: url("http://stock-wallpapers.com/wp-content/uploads/2015/01/Huawei_P7_home_wallpaper_02_.jpg") center center no-repeat;
background-size: cover;
height: 300px;
width: 600px;
}
.main-bottom {
height: 300px;
width: 600px;
background-image: -moz-linear-gradient( -51deg, rgb(28, 35, 80) 0%, rgb(27, 31, 71) 41%, rgb(25, 26, 62) 100%);
background-image: -webkit-linear-gradient( -51deg, rgb(28, 35, 80) 0%, rgb(27, 31, 71) 41%, rgb(25, 26, 62) 100%);
position: relative;
top: -150px;
-webkit-clip-path: polygon(0 0, 100% 32%, 100% 100%, 0 68%);
clip-path: polygon(0 0, 100% 32%, 100% 100%, 0 68%);
}
<div class="main">
<div class="main-top">
</div>
<div class="main-bottom">
</div>
</div>
I'm trying to create a banner which spans the page width. A centered container measuring 1130px within this region holds five blocks of color at 20% of the container. Behind this container should be two divs at 50% each - one containing the first color swatch and the other containing the last to create a seamless palette but maintain the same width.
The issue I'm having at the minute is that the .modal-container which holds the five colour blocks will not display on top of the two background blocks .modal-left and .modal-right. I've tried tinkering with the z-index values of all three classes to no avail. position: absolute isn't an option either as this knocks the margin: 0 auto alignment off. Any ideas?
JSFiddle
The effect I'm looking for
EDIT:
I just got really carried away and did a total overhaul on that code. I'M SORRY I COULDN'T HELP MYSELF LOL
New and improved ya dig.
Your HTML simply needed some re-arranging. The inner div placed above the other two fixed it right up.
CSS (updated):
.modal {
background-image: -webkit-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: -moz-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: -ms-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: -o-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: linear-gradient(to left, #3e454c 50%, #ff7f66 50%);
background-size: cover;
background-attachment: fixed;
background-position: left top;
background-repeat: no-repeat;
height: 54px;
width: 100%;
max-width: 1130px;
}
.modal-inner {
position: relative;
max-width: 1130px;
}
.modal-block {
float: left;
width: 20%;
height: 27px;
}
.una {
background: #3e454c;
background: rgba(62, 69, 76, .5);
}
.dos {
background: #2185c5;
background: rgba(33, 133, 197, .5);
}
.tres {
background: #7ecefd;
background: rgba(126, 206, 253, .5);
}
.cuatro {
background: #fff6e5;
background: rgba(255, 246, 229, .5);
}
.cinco {
background: #ff7f66;
background: rgba(255, 127, 102, .5);
}
HTML (less is more :) ):
<div class="modal">
<div class="modal-inner">
<div class="modal-block una"></div>
<div class="modal-block dos"></div>
<div class="modal-block tres"></div>
<div class="modal-block cuatro"></div>
<div class="modal-block cinco"></div>
</div>
</div>
See demo here http://jsfiddle.net/Godinall/cq27S/3/
First, re-arrange your divs to put the 50/50 underneath
Second, and most importantly, add this to .modal-inner
I believe this is better solution than setting position/margins
display:block;
I am trying to put a bottom bar to the bottom of the screen. I have piece of CSS code which creates the bar for me. But I haven't be able to fix the bar to the bottom.
CSS
.top_bar
{
display:block;
height:18px;
margin-bottom:10px;
margin-top:10px;
background-image: linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
background-image: -o-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
background-image: -moz-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
background-image: -webkit-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
background-image: -ms-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
background-image: -webkit-gradient(
linear,
left bottom,
right 0,
color-stop(0.15, rgb(135,30,51)),
color-stop(0.58, rgb(90,115,183)),
color-stop(0.79, rgb(90,116,183))
);
}
How can I fix this to the bottom?
I have tried this code below but I didn't work. It fixes the bar to the bottom but gradient bar shrinks...
position: fixed;
bottom: 30px;
Just add these 3 to your rule, fixed positioning needs the element's width to be mentioned, because it is just a specialized form of absolute positioning:
position: fixed;
width: 100%;
bottom: 30px;
Fiddle
If the element is positioned using absolute or fixed, the element's width won't automatically grow to 100% the way it does otherwise. If you want the width to be 100%, you need to set that manually.
Code:
.top_bar {
position: fixed;
bottom: 30px;
display:block;
height:18px;
width: 100%; //Manually set width to 100%
margin-bottom:10px;
margin-top:10px;
//Gradient stuff
}
Example: http://codepen.io/skimberk1/pen/4eca8e6d6f9b899458cfa4ccfea38877
http://jsfiddle.net/Y7UKv/1/
When the position type is changed it no longer has a width of 100%. You'll need to add
left: 0;
right: 0;
or
width:100%;