I have the following background using background-size: cover and I'd like to offset it a bit to the left.
.landing {
display: flex;
padding: 2rem 4.5rem;
height: 100vh;
width: 100vw;
background-image: url('~assets/img/background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
If I use cover, I can't offset my image so I tried doing
.landing {
background-size: 110%;
background-position: right 10% center;
}
But I end up with white space on top and bottom of my image because it doesn't expand to respect image's aspect ratio (the height is set to auto).
Without using cover, how can I set the right background-size percentage to avoid whitespaces on top/bottom of the image on any screen size and keeping aspect ratio?
To get the background shifted slightly to the left but still completely filling you could put it on a before pseudo element, then you have a lot of control over dimensions and positioning without affecting the main element.
Here's an example where we want to move the background so the person is 30px to the left. The pseudo element is given a width + 30px but translated 30px to the left.
.landing, .landing:before {
position: relative;
display: flex;
padding: 2rem 4.5rem;
height: 100vh;
overflow: hidden;
}
.landing {
position: relative;
display: flex;
width: 100vw;
}
.landing:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: calc(100vw + 30px);
transform: translate(-30px);
background-image: url('https://picsum.photos/id/1049/1024/768');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
z-index: -1;
}
<div class="landing"></div>
Note: a bit more sophisticated arithmetic is needed to do it in terms of % (given the % width of the pseudo element is more than the original)!
body{
background-color: #000;
height: 100vh;
}
section {
width: 100%;
height: 100%;
}
#section1 {
background-color: #f0f0f0;
}
#bubbles1, #bubbles2{
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
#bubbles1{
background: url('img/greencat.png') 60% 50% no-repeat fixed;
background-color: #f0f0f0;
}
#bubbles2{
background: url('img/catb.png') 60% 50% no-repeat fixed;
position: fixed;
-webkit-backface-visibility: hidden;
}
#fish{
background: transparent url('img/textgreen.png') no-repeat bottom left fixed;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
}
#fish1{
background: transparent url('img/textblue.png') no-repeat bottom left fixed;
height: 100%;
width: 100%;
/* position: absolute;*/
top: 0px;
}
#media screen and (max-width: 860px){
ound-image: url('img/greencat-mobile.png');
background-size: 250vw 100vh;
background-position: 53% 50%;
}
#bubbles2{
background-image: url('img/catb-mobile.png');
background-size: 250vw 100vh;
background-position: 53% 50%;
position: fixed;
-webkit-backface-visibility: hidden;
}
#fish{
background: transparent url('http://www.intomorrow.com/wp-content/uploads/2016/06/Barnsley-House-Spa-2-844x800.jpg') no-repeat 3% 78% fixed;
position: absolute;
}
#fish1{
background: transparent url('http://www.intomorrow.com/wp-content/uploads/2016/08/Fairmont-Pittsburgh-30-844x800.jpg') no-repeat 3% 78% fixed;
}
}
<section id="section1">
<div id="bubbles1"></div>
<div id="fish"></div>
</section>
<section id="section2">
<div id="bubbles2"></div>
<div id="fish1"></div>
</section>
This is my html and css, the problem is when i scroll on mobile devices than image is flikering, not stick to the fixed position. I gave the position fixed in css but it is not working. I checked on Android, Windows and Apple devices.
Android : first image moved up on scrolling
Windows : first image displaying proper but when i scroll for second image than its flikering
Apple : display white background insted of image, second image visible but its flikering on scroll
Most mobile devices have a delay in updating the background position after scrolling a page with fixed backgrounds.
i came across this problem too.
i know 3 possible fixes for this
1. you can try using a pseudo-element and add background fixed to it
2. you can make another div inside the fixed div. and add background to that div
3. use -webkit-transform: translateZ(0x); transform:translateZ(0) to force hardware acceleration
see more here
http://caniuse.com/#search=background-attachment
Background size on iOS
let me know if it helps
I am making a layout with an background in body. I need to center it both horizontally and vertically. For that purpose I use background-position:center.
background-image:url('address');
background-repeat:no-repeat;
background-position:50% 50%;
However, the background not positoned correctly vertically: you can see only half of the image in the top of the screen. Check it here link to codepen.
As a solution I tried to use images with different sizes and background-position:50% 50%. Then I double-checked other background-relative selectors and found that if I add background-attachement and change it from its default value which is scroll to fixed, than the image is centered correctly.
Can anybody explain please why this happens?
It happens if you didn't gave the body a height, as its default is 0.
The body's height is based on its content, and a background image doesn't set it.
Here is a sample showing how you need to do
html, body {
margin: 0;
height: 100%;
}
body {
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
}
Sometimes it can create other issues when one need to give the body a height, and when, a positioned div is one option
#bkgdiv {
position: absolute;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
}
<div id="bkgdiv"></div>
So, based on how/if you need to use background-attachment: scroll and/or positioned div's, here is a sample showing their behavior when one scroll (and a fiddle demo to play with)
html, body {
margin: 0;
height: 100%;
}
body {
background-image: url(http://placehold.it/200);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
}
#bkgdiv {
position: absolute;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/180/0f0);
background-repeat: no-repeat;
background-position: center center;
}
#bkgdivfixed {
position: fixed;
left: 0; top: 0; right: 0; height: 100vh;
background-image: url(http://placehold.it/160/ff0);
background-repeat: no-repeat;
background-position: center center;
}
<div id="bkgdiv"></div>
<div id="bkgdivfixed"></div>
<div style="width: 5px; height: 150vh; background: red; margin: 5px"></div>
If you want to gave background to body, its really simple task.
initially you need to write css for body and html
html, body {
margin: 0;
height: 100%;
}
The next ting is you need to gave background css to the body
body {
background-image: url(https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg);
background-position: center;
background-repeat: no-repeat;
}
Okey now the image seems to be the center of the body(screen),
Now you can adjust the size using background-size property.
background-size: cover;
The images enlarged enough to cover the entire screen.
background-size: contain;
The images enlarged up to the height or width(which is smaller) of the screen.
you can give fixed size my giving size to it
background-size: Xpx Ypx;
I'm looking for a way to create bent top and bottom borders like the div in this image. I've tried some ways mentioned here but it depends on using white divs with border-radius on top of the main div but as you can see in this image it should be transparent to display the background image.
This is possible using svg.
For responsiveness remove the svg's width and height attributes, add viewBox="0 0 400 150" then try changing #image's width and height, the svg will respond to its width and height.
Demo on Fiddle demonstrating responsive shape.
Browser support for this approach - This will work on all browsers but IE8.
body {
background: teal;
}
#image {
width: 600px;
height: 300px;
position: relative;
background: url(http://lorempixel.com/600/300);
}
svg {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="image">
<svg width="400" height="150">
<path opacity="0.6" fill="red" d="M0,10 Q0,0 10,0 Q195,40 390,0 Q400,0 400,10 Q390,75 400,140 Q400,150 390,150 Q195,100 10,150 Q0,150 0,140 Q10,75 0,10" />
</svg>
</div>
Another posibility, not using clipping but multiple backgrounds.
Technically less advanced than chipChocolate answer, just providing an alternative
.test {
position: absolute;
left: 50px;
top: 50px;
width: 400px;
height: 100px;
border-radius: 10px;
background-image: radial-gradient(circle at center -778px,
transparent 800px, rgba(255,0,0,0.4) 800px),
radial-gradient(circle at center 828px,
transparent 800px, rgba(255,0,0,0.4) 800px);
background-position: center top, center bottom;
background-size: 100% 50%, 100% 50%;
background-repeat: no-repeat;
}
Thw idea is to divide the element in 2 halves, and then set in each a radial gradient that matches the corners position. The final posiotion of the gradients adjusted by hand.
Can de done responsively also.
demo
body {
width: 100%;
height: 100%;
background: url(http://placekitten.com/g/600/300);
}
.test {
position: absolute;
left: 50px;
top: 50px;
width: 400px;
height: 100px;
border-radius: 10px;
background-image: radial-gradient(circle at center -778px,
transparent 800px, rgba(255,0,0,0.4) 801px),
radial-gradient(circle at center 828px,
transparent 800px, rgba(255,0,0,0.4) 801px);
background-position: center top, center bottom;
background-size: 100% 50%, 100% 50%;
background-repeat: no-repeat;
}
<div class="test"></div>
An other approach with one div, 2 pseudo elements , border-radius and box-shadows :
div {
width: 70%; height: 150px;
margin: 20px auto;
position: relative;
border-radius: 10px;
overflow: hidden;
opacity: 0.5;
}
div:before,div:after {
content: '';
position: absolute;
height: 100%; width: 300%;
left: -100%;
border-radius: 100%;
box-shadow: 0px 0px 0px 140px red;
}
div:before {top: -146px;}
div:after {bottom: -146px;}
body {background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');background-size: cover;}
<div></div>
Actually doing this using the CSS would almost be impossible, and you would be good if you just try out a simple PNG image, created using Photoshop, Google Images etc, and create the image exactly of this size and then use it inside the website.
You can add the transparency to the image while creating it by using the Adobe UI tools for editing the image, or you can use the alpha filter in CSS to set the transparency effect to it to display the element that is residing behind it (the effect that you want).
i have a left admin panel which is set in percentage width. the problem is that i have a repeating background in it and when i use background-size to tuck-in the background image to the size of percentage-based width, the image just disappears in chrome. in firefox it works fine. But when i use ctrl - to zoom-out the display, the image appears.
the css of the left panel is:
.adminmenuback {
width: 30%;
background: url(../images/leftpanel_bg.png) left top repeat-y;
background-size: 100%;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
}
pls help.
You can use 100% 100% for background size.
.adminmenuback {
width: 30%;
background: url(../images/leftpanel_bg.png) left top;
background-size: 100% 100%;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
height: 100%;
}
http://jsfiddle.net/aEJRB/
try this
background-size:contain;
background-size: cover;
Try this.