I made a small (100x50) background image for my one page scroll website like this:
section:before
{
position: fixed;
z-index: -1;
right: 0;
left: 0;
height: 105%;
margin: -15px -15px 0 -15px;
content: '';
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
section.first-page:before
{
background-image: url('/images/first-background.png');
}
And so I have four section with height set to 100%.
In chrome, this works perfectly, but in Firefox, the last two images are gone. I see a white background, and when I open the browser console, the images are loaded with 304. But what really sucks is that when opening the console sometimes or just reloading, the background reappears!!
Here is a demo
Related
I cannot get get rid of the white spaces along the left, right and top of my background image that i am using to cover above the fold for the header of the webpage.
I am running my tests on Google Chrome. using VS Code as my editor.
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
/*Top part image background blue*/
.image-box {
background-image: url(backgroundtoppart.png);
background-repeat: no-repeat;
height: 100%;
width: 100%;
position: absolute;
background-size: 100% 100%;
z-index: -1;
}
<div class="image-box">Image</div>
background-position: top left; Could be worth a try rather than absolute.
The background image of the header of my site is stretching and warping in weird ways on certain mobile phones.
Here's the link to the site - https://jaels-creations-stage.callgage.co/
Here's the code for the background image, it s a child of the header container:
.header .background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center 92%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
z-index: -1;
/* On Load Animation */
opacity: 0;
}
I've been trying to figure this out for a long while now, I can't replicate it on my macbook, and with devtools remote devices I can't figure out a proper way to fix it. Any help would be greatly appreciated.
Try height:auto; that will cause css to retain the image's natural aspect ratio
I think is because you need to set the eight to auto
bg {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
/* set your own */
min-width: 1440px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Use this if you have your images set to fixed. It will promote the layer */
transform: translate3d(0, 0, 0);
}
The image disappears when zoomed out to 40% on Firefox. Up until zoom 50%, it is fine. However at zoom 40%, it just vanishes:
Whereas in Chrome the image is still visible but slightly misaligned, this happens at different levels of zoom:
For once Internet Explorer is actually displaying the expected result regardless of zoom!
What is trident doing differently to webkit and gecko, and how can I patch it?
Here is all the relevant code:
body {
background-color: rgba(31, 59, 8, 1);
}
#main {
z-index: 1;
position: absolute;
top: 113px;
left: 50%;
width: 900px;
height: 100%;
margin-top: 160px;
background-image: url('http://i.stack.imgur.com/zZCB2.png');
background-repeat: repeat-y;
margin-right: -50%;
text-align: center;
transform: translateX(-50%);
}
#main:before {
content: " ";
position: absolute;
left: 0px;
top: -113px;
background-image: url('http://i.stack.imgur.com/7DE7i.png');
background-repeat: no-repeat;
width: 900px;
height: 113px;
}
#main:after {
content: " ";
position: absolute;
left: 0px;
bottom: -200px;
background-image: url('http://i.stack.imgur.com/DVJAq.png');
background-repeat: no-repeat;
width: 900px;
height: 200px;
}
<div id="main"></div>
Making your body.png image 20px tall or so will fix the issue. 1px repeating images act strange sometimes. Should help with redraw/flickering while the element is loaded as well.
Also, setting the "#main:before" to have a top of -112px instead of -113px got rid of the funky line in Chrome when you zoom in (at least for me).
Hope that helps.
I am not sure, but i belive if you split the images and make 3 parts:
::before (white top, with bottom shadow)
::header (the red box)
::after (White bottom, with top shadow from the red box)
I hope that this answer helps!
I have this in my CSS:
.cover .cover-image {
z-index: -1;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background-size:100%;
background-size: cover;
background-position: center;
}
I also have this in my HTML:
<div class="cover-image" style="background-image : url('./bkg.jpg');">
bkg.jpg is a 1939x1131 image - bigger than any of my monitors. On my smallest (1280x1024) monitor, it displays fine:
On my medium (1440x900) and large (1920x1080) monitor - both of which are smaller than the image - it shows a bit of white between the image and the scrollbar:
Why does this show, and how do I fix it?
Check your image source
https://chipperyman.com/dota/bkg.jpg
You have a white bar on your image.
double on background-size your code, please fix background-size:100%, otherwise you will get issue.. And i mean you not need using background-size because your image already bigger than your screen..
you need normalize html, body
html, body {
padding: 0;
margin: 0;
}
there.
Basically you are having an absolute positioning bug here. Just add 'left: 0px;' to your .cover .cover-image selector as per following:
.cover .cover-image {
z-index: -1;
position: absolute;
left: 0;
top: 0px;
width: 100%;
height: 100%;
background-size:100%; /* old browser fallback, but I'd delete it */
background-size: cover; /* duplicate of background-size */
background-position: center;
}
Here is also a jsfiddle example of fixing it: http://jsfiddle.net/webyourway/868L6hhg/
I'm trying to make an image that changes into another image when hovered over that also scales based on the size of the browser.
The css code I have so far is this:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#a_Cscaleskb{
width:0px;
height:0px;
background:url('../images/a_Cscaleskb_up.gif');
padding:47px 114px;
}
#a_Cscaleskb:hover {
background: url('../images/a_Cscaleskb_over.gif');
}
with the html:
<img id="a_Cscaleskb" src="../../images/a_Cscaleskb_up.gif" alt="" />
This works great for changing the image on hover but when I shrink down the browser it doesn't change.
Another piece of code I've tried is this:
#a_Cscaleskb{
background:url('../images/a_Cscaleskb_up.gif');
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
background-size: contain;
}
#a_Cscaleskb:hover {
background: url('../images/a_Cscaleskb_over.gif');
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
background-size: contain;
}
This css scales properly upon hovering, but you can see both images laying over each other. I know it's also possible to use javascript but I'm trying to avoid using it. Any suggestions are greatly appreciated.
If you want to scale your images according to browser size then use this sneaky bit of code:
img{max-width:100%;width:auto;height:auto}
that's what i've used in my gallery page in www.busyfeet.rachelgallen.com - give it a look and see it in action