On my website, I want that the background does not move at all, while the content scrolls in the foreground normally over the background. This effect is working perfectly on my macbook. I have tested it with Safari, Chrome and Firefox. Now when I open the website on my iPhone, the background images are covering the whole div container, not just the screen, which means that the image is way too big and not sharp anymore.
HTML:
<div id="tf-home" class="text-center">
<div class="overlay">
<div class="content">
<h1>EURE <strong><span class="color">FLUCHT</span></strong> beginnt an diesem Ort</h1>
</div>
</div>
</div>
CSS:
#tf-home {
background: url(../img/header.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
min-height: 100%
color: #cfcfcf;
}
I hope that someone can help me.
Thank you in advance :)
here you have a jsfiddle
#tf-home {
background: url(https://www.google.com/work/images/logo/google-for-work-social-icon.png);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
min-height: 100vh;
color: #cfcfcf;
}
Related
I am trying to fit my background image to my different media queries but i cannot make the image to display completely.
.main {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
background: url("images/BANNER.png");
background-size: cover;
position: center;
background-attachment: fixed;
}
#media (max-width:375px) {
.main {
background-image: url("images/BANNER.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
}
<section class="main" id="main">
<div class="content">
<h2>Hello, this is <br><span>Aptos Koalas</span></h2>
LFM!
</div>
</section>
I was able to center de image with background-position but i cannot make the image to show completely.
you are using the background-size: cover; property that will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
try with background-size: contain
This is my div tag background image code.
<div class="text-center paira-gap-2 paira-gap-1 position-r parallax parallax-1527413728902" style="background: url("//cdn.shopify.com/s/files/1/0611/5003/6139/files/Home2_1659f2cd-aa5a-4d18-9a93-b5955c1ec056.png?v=1648657681") 50% 8px no-repeat fixed; height: 900px;">
If someone have solution let me know.
You can make use of background-size and set it to cover to span the entire div. In addition, I recommend, placing the background to the center:
div {
background-size: cover;
background-position: center;
}
<div class="text-center paira-gap-2 paira-gap-1 position-r parallax parallax-1527413728902" style="background-url: url("//cdn.shopify.com/s/files/1/0611/5003/6139/files/Home2_1659f2cd-aa5a-4d18-9a93-b5955c1ec056.png?v=1648657681") background-size: cover; background-position: center; height: 900px;">
I know, this has been discussed over and over again. but it still seems to be a specific understanding issue on my side. after implementing several bug fixes from here and elsewhere my site is still not working as wished.
I got a fixed background-image in the header section of my page. this is working perfectly fine on normal chrome browser. however i cannot get it running on mobile chrome browser
i've got following lines of html:
<body id="page-top">
<!-- Header -->
<header class="masthead bg-head text-white text-center">
<div class="container">
<h1 class="text-uppercase mb-0">My Name</h1>
<img id="header-star" class="img-fluid" src="img/star-light.png" alt="">
</div>
</header>
aligned with the following lines of css:
body {
font-family: 'Lato';
max-width: 1280px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
}
header{
background-color: #4a4a4a;
background-image: url("../img/background-bern-4.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
padding-top: 6rem;
height:500px;
}
for example i wrote a media query with height of 100% with browser specific commands and so on:
#media (max-width: 576px){
header{
height:100%;
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
and then i tried to put y-overflow: scroll; to body and hidden to header enter link description here
Furthermore I tried to put the image into a div like this enter link description here
html:
<!-- Header -->
<header class="masthead bg-head text-white text-center">
<div class="container header">
<h1 class="text-uppercase mb-0">My Name</h1>
<img id="header-star" class="img-fluid" src="img/star-light.png" alt="">
</div>
</header>
css:
.header{
position: fixed;
z-index: -1;
background-color: #4a4a4a;
background-image: url("../img/background-bern-4.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
padding-top: 6rem;
height:500px;
}
whit this technique the picture is gone completely after all
somewhere I must missing something, don't I?
You just need to fix path of background image
#media (max-width: 576px){
header{
background-image: url("../img/background-bern-4.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
height:auto;
max-height: 100%;
}
}
I hope this will help!
I am trying to create a simple parallax image with background attachment to fixed. The image looks okay on android's mozilla browser in my android phone and looks okay in chrome developer's tool but when I look at it on my IphoneX, the image looks zoomed in and fixed.
Here is my code.
HTML:
<div class="weddingparallax">
</div>
CSS:
.weddingparallax {
background-image: url("imageurl");
background-attachment: fixed;
background-size: cover;
background-position: center;
height: 80vh;
}
Try this:
.weddingparallax {
background-image: url("imageurl");
min-height: 500px; /* you can change it */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Do let me know if it works!
I have a webpage that changes the background image as you scroll to new sections of the page. It can be viewed here. I am having trouble getting the changing background images to show up on IE7/8. I tried using css3pie, but it doesn't seem to be working. Here is a sample of my html right now:
<!-- background image section w/ text on top -->
<section id="anvil" class="bg">
<div class="center text">
<p class="imageCopy">Stunningly beautiful colors...</p>
</div>
</section>
<section class="divider">
<!-- this is the divider section -->
</section>
<!-- new background image section -->
<section id="office" class="bg">
<div class="center text">
<p class="imageCopy">at a price you can afford.</p>
</div>
</section>
and the css:
#anvil {
background-image: url(/images/anvil.jpg);
-pie-background: url(/images/anvil.jpg) no-repeat;
behavior: url(/PIE-1.0.0/PIE.htc);
}
#office {
background-image: url(/images/office.jpg);
-pie-background: url(/images/office.jpg) no-repeat;
behavior: url(/PIE-1.0.0/PIE.htc);
}
.bg {
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: 0 -80px; /* IE 8 fix */
background-position: 0 -5rem;
height: 47rem;
height: 750px; /* IE 8 fix */
}
.divider {
background-color: #000000;
height: 29rem;
height: 464px; /* IE 8 fix */
}
It's difficult for me to determine what exactly is causing the issues with IE as well, so I might be on the wrong track with the background properties (e.g., sections are not supported by IE 7/8, but I think I fixed that). Any advice would be greatly appreciated! Thanks!