My linear-gradient only goes to the bottom of the div.
Question How to make sure the body linear-gradient goes to full height of the page?
CODEPEN DEMO
CSS
body {
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to bottom right, #0087e0 50%, #004165 50%, #004165);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
.header {
background: #FFFFFF;
width: 100%;
height: 50px;
}
.wrapper {
background: #F0F0F0;
min-height: 600px;
}
#media (max-width: 968px) {
.text-mobile {
text-align: center !important;
}
}
HTML
<div class="container">
<div class="wrapper"></div>
</div>
You need to set your html and body height to 100%;
html, body {
height: 100%;
}
Related
.image {
background-image: url('task pic 1.jpeg'), url('task pic 2.jpeg'), url('task pic 3.jpeg');
background-position: left bottom, left top, center;
background-repeat: no-repeat, no-repeat, no-repeat;
margin-top: 50px;
margin-right: -200px;
margin-left: 800px;
padding: 300px;
border: 100%;
width: auto;
background-size: auto;
position: relative;
}
You can set a static width/height using background-size:
body {
margin: 0;
}
.image {
background-image: url('https://www.enterprise.ca/content/dam/ecom/general/Homepage/inspiration-banff-ca.jpg.wrend.1280.720.jpeg'), url('https://www.enterprise.ca/content/dam/ecom/general/Homepage/inspiration-banff-ca.jpg.wrend.1280.720.jpeg'), url('https://www.enterprise.ca/content/dam/ecom/general/Homepage/inspiration-banff-ca.jpg.wrend.1280.720.jpeg');
background-position: 0 0, 0 200px, 100px 100px;
background-repeat: no-repeat;
background-size: 300px;
width: 500px;
height: 500px;
position: relative;
}
<div class="image"></div>
body{margin: 0;}
.image{
background-image: url('task pic 1.jpeg'),url('task pic 2.jpeg'),url('task pic 3.jpeg');
padding:20%;
background-position: 80% 0%,80% 90%,100% 50%;
background-repeat:no-repeat;
width:auto;
background-size:20%;
position: relative;
}
How can I add a linear radiant to a background image with a specified height?
Codepen
<div class="bg-img"></div>
<h1>This should not be covered</h1>
html, body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%; # works with 100%, but not anything less
background: url('http://unsplash.it/1200x800') center center no-repeat;
background-size: cover;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
opacity: .6;
}
}
add position:relative to .bg-img so absolute pseudo refers to it for coordonates and positioning.
.bg-img {
width: 100%;
height: 60%; # works with 100%, but not anything less
background: url('http://unsplash.it/1200x800') center center no-repeat;
background-size: cover;
position:relative;
https://codepen.io/gc-nomade/pen/ZXKdbv
html,
body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%;
background: url("http://unsplash.it/1200x800") center center no-repeat;
background-size: cover;
position: relative;
}
.bg-img:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
opacity: .6;
}
<div class="bg-img"></div>
<h1>This should not be covered</h1>
Other option is to use rgba() colors and set both gradient and image as background images
html, body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%;
background:linear-gradient(to bottom right, rgba(0,47,75,0.6), rgba(220,66,37,0.6)), url("http://unsplash.it/1200x800") center center no-repeat;
background-size: cover;
}
<div class="bg-img"></div>
<h1>This should not be covered</h1>
I have a page where I want a full-screen background image. This works fine when the the body fits within the viewport, I have html { height: 100%; } and body { min-height: 100%; padding-top: 70px; ... background-size: cover; } (the top padding is for a page header). The issue arises when the page becomes larger than the viewport. The body stretches to the correct height, however the background attachment never grows larger than the size of the viewport. Here is a sample fiddle [https://jsfiddle.net/xdsgek6t/]. In the live version there is also an image overlay, but in the fiddle you can easily see the line where the radial gradient ends, even though I've told it to cover the body, which in this fiddle is 3000px tall due to a child element.
html { height: 100%; box-sizing: border-box; }
body {
overflow-y: scroll;
padding-bottom: 30px;
padding-top: 70px;
background-color: #363636;
min-height: 100%;
background-color: #1976D2;
background-image: radial-gradient( circle at top right, #64B5F6 0%, #1976D2 90% );
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right 70px;
background-size: cover;
margin: 0;
box-sizing: border-box;
}
div.something { height: 3000px; width: 10px; }
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }
<body>
<header></header>
<div class="something"></div>
</body>
This ends up looking really strange when the page grows a tiny bit larger, and is really evident on mobile.
Remove height: 100%; from html and it will extend. And if you need min-height: 100% on body, you can use min-height: 100vh instead, and that will not rely on height: 100% on html
html { box-sizing: border-box; }
body {
overflow-y: scroll;
padding-bottom: 30px;
padding-top: 70px;
background-color: #363636;
min-height: 100vh;
background-color: #1976D2;
background-image: radial-gradient( circle at top right, #64B5F6 0%, #1976D2 90% );
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right 70px;
background-size: cover;
margin: 0;
box-sizing: border-box;
}
div.something { height: 3000px; width: 10px; }
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }
<header></header>
<div class="something"></div>
I'm attempting to apply a background image gradient over an image by setting it on its parent div, but it's having no effect, which is strange so I've done this before.
<header id="hero">
<div id="hero-image">
<img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Hero%20Image&w=1920&h=500" />
</div>
</header>
header#hero {
margin: 0 auto;
width: 100%;
font-size: 1rem;
}
header#hero #hero-image {
background-image: linear-gradient(transparent 50%, black 100%);
}
header#hero #hero-image img {
display: block;
width: 100%;
max-height: 500px;
object-fit: cover;
}
Demo: http://codepen.io/ourcore/pen/xgqNZJ
I was able to achieve this by applying position: relative and z-index: -1 to #hero-image img:
header#hero {
margin: 0 auto;
width: 100%;
font-size: 1rem;
}
header#hero #hero-image {
background-image: linear-gradient(transparent 50%, black 100%);
}
header#hero #hero-image img {
display: block;
position: relative;
width: 100%;
max-height: 500px;
object-fit: cover;
z-index: -1;
}
I'm trying to overlay this logo so it sits at the bottom of the page, and also so it is offset by its full width to the left (so that the right edge of the logo sits against the center line).
If I use position:absolute on #logo I have access to the top and left properties, which is good, but now centering won't work...
Here's the fiddle.
Also: making it a fixed distance from the left edge of the page won't work because the page is responsive. The right edge of the logo always has to sit perfectly on the center line.
In case the fiddle isn't working here's the code:
HTML:
<div id ="layer1">
<p>Hello</p>
</div>
<div id="layer2">
<div id="wrapper">
<img id="logo" src="http://i.stack.imgur.com/icxpG.png"/>
</div>
</div>
CSS:
body {
background: linear-gradient(to left, #1a1a1a 50%, #f15922 50%);
}
#layer1 {
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
}
#layer2 {
position: absolute;
z-index: 5000;
height: 100%;
width: 100%;
}
#wrapper {
position: relative;
background-color: rgba(255, 255, 255, 0.3);
height: 100%;
}
#logo {
background-color: rgba(255, 0, 0, 0.3);
bottom: 0;
display: block;
margin-left: auto;
margin-right: auto
}
You could add position: absolute; and transform to center your #logo like this:
JSFiddle - DEMO
#logo {
background-color: rgba(255, 0, 0, 0.3);
display:block;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
To get the image positioned offset perfectly at all widths, we need to get rid of the gradient and apply the second background to a pseudo element of the body.
In these 2 examples, body provides the orange background and body:before provides the dark background.
Example 1 - logo is a background image
calc(50% - 167px) offsets the logo.
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body {
background: #f15922 url(http://i.stack.imgur.com/icxpG.png) calc(50% - 167px) bottom no-repeat;
}
body:before {
width: 50%;
height: 100%;
background: #1a1a1a;
content: '';
display: block;
position: absolute;
right: 0;
}
Example 2 - logo is <img>
right: 50% and bottom: 0 keep it at the bottom and offset by the natural width of the image.
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body {
background: #f15922;
}
body:before {
width: 50%;
height: 100%;
background: #1a1a1a;
content: '';
display: block;
position: absolute;
right: 0;
}
#logo {
position: absolute;
bottom: 0;
right: 50%;
}
<img id="logo" src="http://i.stack.imgur.com/icxpG.png" />
Old Archived Examples (with gradient)
Limitation: There is a gap at certain viewport widths that is caused by the gradients 50% calculation. I'm not certain that this can be avoided.
Archived 1 - Keep it all in a background image / gradient
calc(50% - 167px) offsets the image from the center
html, body {
height: 100%;
width: 100%;
margin: 0;
}
body {
background: url(http://i.stack.imgur.com/icxpG.png) calc(50% - 167px) bottom no-repeat, linear-gradient(to left, #1a1a1a 50%, #f15922 50%);
}
Archived 2 - Using <img>
right: 50% and bottom: 0 keep it at the bottom and offset by the natural width of the image.
body {
background: linear-gradient(to left, #1a1a1a 50%, #f15922 50%);
}
#logo {
background-color: rgba(255, 0, 0, 0.3);
bottom: 0;
right: 50%;
position: absolute;
}
<img id="logo" src="http://i.stack.imgur.com/icxpG.png" />