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!
Related
I'm trying to use an SVG as a background for a specific section on a website I'm creating, but I'm finding it difficult. The main problem I'm having is the SVG covers the text, but in the image, I'll link below the SVG is behind the text.
This is the image
This is some code I wrote which didn't work.
.icons_and_text {
margin-top: 100px;
position: relative;
}
.icons_and_text::before {
content: '';
background-image: url('./images/bg-curvy-desktop.svg');
background-size: cover;
position: absolute;
top: -600px;
left: 10;
height: 400px;
width: 100%;
}
I'm looking for answers which would enable me to solve the problem on my own next time, thank you.
Hope it works for you
header .container {
position: relative;
z-index: 1;
}
This seems to work, although it's not exactly what I want. What I want is a perfect way to position the image.
header.header {
background-color: hsl(217, 28%, 15%);
background-image: url(../images/bg-curvy-desktop.svg);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% 23rem;
}
I'm using a CSS Sprite Sheet technology and have a problem with multiple backgrounds.
In this website - https://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img you can see how to set a background from a sprite sheet but my case is a bit different.
Simple code:
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat, url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
width: auto;
height: 40px;
background-size: 319px 349px, auto;
}
<div id="nav1"></div>
And the problem is I don't want to show these 2 icons. I want to show only the first one:
How could I make it? I've tried height and width properties but I think it's not for multiple backgrounds.
It is not possible to crop each image in a multiple-background setting separately. So if you want to keep the yellow bar, but only show one icon on it, consider using a pseudo-element, or an actual DOM element reserved to displaying single icons. E.g. here with an <i>:
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
background-size: auto;
height: 40px;
width: auto;
}
i.icon1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
background-size: 319px 349px;
display: inline-block;
height: 40px;
width: 40px;
}
<div id="nav1"><i class="icon1"></i></div>
If you want to make sure it stays in the background, use z-index. If you want to make sure it doesn't interfere with the content of #nav1, use position: absolute; top: 0; left: 0 as well.
You would have to specify a width.
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
width: 40px;
height: 40px;
background-size: 319px 349px, auto;
position: relative;
}
#nav1:after {
content: "";
background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
width: 232px;
height: 40px;
position: absolute;
z-index: -1;
}
<div id="nav1"></div>
I created this class with CSS:
.leaf {
background: url();
position: fixed;
background-size: 300px;
z-index: 0;
height: 206px;
width: 300px;
top: -5%;
left: -7%;
}
Which shows a leaf in the background. What I want to do is to not make this image move when the page is zoomed, or even when the display's width is less then 1024px. It has to stick in that position!
Thank you very much
I', hoping this makes sense but I have HTML code that I have a child which is an svg animation, I'm wanting to have the section responsive so that the position of the svg stays where its meant to be on the map.
I have selected the coast of Africa as a point that I want to keep the SVG in place when the page is resized, but when it is resized you will see that the red marker moves across the rest of Africa.
You can see the jsFiddle for the Source Code and see the result to the full map.
.about-header__map .angola {
position: inherit;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.about-header__map .angola svg {
top: 49%;
left: 42.5%;
position: absolute;
}
Use the width of the image (1440px) instead of width:100%
.about-header__map {
background: url(http://i.imgur.com/ZqQvEUK.png) no-repeat center center !important;
width: 1440px; /*here */
background-size: cover;
height: 500px;
position: absolute;
z-index: -1;
}
FIDDLE
Use a fixed width in .about-header__map
.about-header__map {
background: url(http://i.imgur.com/ZqQvEUK.png) no-repeat center center !important;
background-size: cover;
height: 500px;
position: absolute;
width: 1500px;
z-index: -1;
}
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