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.
Related
On some devices screens (laptop), I noticed on Chrome and Microsoft Edge browsers, there is line above my backgroungd svg image, on my top menu.
It looks fine if i resize the window, for example it looks good on mobile size screen. If i change the backround height seems to be solved but it will occur on other screen sizes.
#site-nav::after {
content: '';
display: block;
position: relative;
width: 100%;
height: 99px;
top: 0;
left: 0;
z-index: -1;
background-position-y: 2px;
background-size: 100% 75px;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDVVBJRE9OIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMDAwIDI1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgIC5tYWlue2ZpbGw6IzIyMmYzNTt9CiAgICAuc2Vje2ZpbGw6I2M5ZTZmZjt9CiAgPC9zdHlsZT4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJzZWMiIGQ9Ik0wLDEzNi4yYzEwOS43LDE0LjEsMjU5LjcsMjIuNiw0MDMuOCwyMS42YzM0MC4xLDAsNTA4LjItNTcuNiw2MTAuNS04My40QzExMDQuMSw1Ni4zLDEyNTAuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogICAgPHBhdGggY2xhc3M9Im1haW4iIGQ9Ik0wLDE1NC4yYzEwOS43LDE0LjEsMjU0LjcsMjIuNiw0MTMuOCwyMi42YzM0Mi4xLDAsNTA4LjItNTcuNiw2MjAuNS04OC40QzExNTEuMSw1Ni4zLDEzMTEuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogIDwvZz4KPC9zdmc+);
transform: scale(-1,-1.4);
}
I add a printscreen of the error here
On firefox, it seems to be fine.
I wonder if the top line is not a part of the svg image. Unfortunatelly I am not a svg expert.
Thank you for help.
Try removing background-position-y from your css. So that the new CSS looks like this.
#site-nav::after {
content: '';
display: block;
position: relative;
width: 100%;
height: 99px;
top: 0;
left: 0;
z-index: -1;
background-size: 100% 75px;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDVVBJRE9OIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMDAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMDAwIDI1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgIC5tYWlue2ZpbGw6IzIyMmYzNTt9CiAgICAuc2Vje2ZpbGw6I2M5ZTZmZjt9CiAgPC9zdHlsZT4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJzZWMiIGQ9Ik0wLDEzNi4yYzEwOS43LDE0LjEsMjU5LjcsMjIuNiw0MDMuOCwyMS42YzM0MC4xLDAsNTA4LjItNTcuNiw2MTAuNS04My40QzExMDQuMSw1Ni4zLDEyNTAuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogICAgPHBhdGggY2xhc3M9Im1haW4iIGQ9Ik0wLDE1NC4yYzEwOS43LDE0LjEsMjU0LjcsMjIuNiw0MTMuOCwyMi42YzM0Mi4xLDAsNTA4LjItNTcuNiw2MjAuNS04OC40QzExNTEuMSw1Ni4zLDEzMTEuNSwwLDE2NTMuNiwwYzEyOSwwLDI0Ny4zLDUuNiwzNDYuNCwxNS4zVjI1MEgwVjE1NC4yeiIvPgogIDwvZz4KPC9zdmc+);
transform: scale(-1,-1.4);
}
I have a div section with a background image. The div section has a variable width but a fixed height.
The background images has always the same with as the div section and is positioned at the bottom center.
footer{
position: absolute;
bottom: -20px;
left: 0;
right: 0;
height: 300px;
width: 100%;
color: #fff;
background-color: #7f7f7f;
}
footer::before{
content: "";
position: absolute;
top: 0px;
height: 100%;
width: 100%;
background-image: url("./img.png");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: bottom center;
opacity: 0.4;
}
If now the div section goes to width, the background image becomes to height and is cut on the top.
I would like to change the position to top center if the image becomes to height and so cut the bottom of the image. Is there a solution to achiev this effect?
did you try to change the background-size from 100% auto to 'contain' like this:
background-size: contain;
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 have a footer that is 1024px in width with a background image 1024px by 482px.
I want to put an x-repeating background to the left of it and an x-repeating background to the right of it. How do I do this?
This is what I have:
.footer {
background:
url("footerleft-bg.png") repeat-x,
url("footerright-bg.png") repeat-x 0 0 #fff;
height:482px;
width:100%;
}
But it makes the left background image completely cover the right one.
You could do it like this:
demo
footer {
position: absolute;
bottom: 0;
width: 100%;
min-height: 10em;
background: black;
}
footer:before, footer:after {
position: absolute;
top: 5%; bottom: 5%;
width: 40%;
background-repeat: repeat-x;
background-size: 1px 100%;
content: '';
}
footer:before { left: 5%; background-image: linear-gradient(crimson, black); }
footer:after { right: 5%; background-image: linear-gradient(black, dodgerblue); }
However, there is no way to do it without using nested elements or pseudo-elements. A background repeats itself or it doesn't. It doesn't repeat itself just on an interval from point A to point B (though I would sometimes find that useful as well).
CSS2 does not support multiple background images. You'll need to nest another HTML element to make this work.
See: http://www.quirksmode.org/css/multiple_backgrounds.html