user979331
Reputation: 11961
CSS position fixed does not appear on mobile
I have an element like with this css:
element.style {
background-image: url(image.jpg);
}
.panel-image {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
position: relative;
}
I am now trying to make it a fixed position, so when i try to do the following:
.panel-image {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
position: fixed;
width: 100%;
height: 200px;
}
The element no longer appears on the page.
There is an element that wraps around this element:
.twentyseventeen-panel {
overflow: hidden;
position: relative;
}
Here is the html:
<article id="panel1" class="twentyseventeen-panel post-47 page type-page status-publish has-post-thumbnail hentry">
<div class="panel-image" style="background-image: url(https://2017.wordpress.net/wp-content/uploads/2016/10/pexels-photo-30724-2000x1200.jpg);">
<div class="panel-image-prop" style="padding-top: 60%"></div>
</div><!-- .panel-image -->
<div class="panel-content">
<div class="wrap">
<header class="entry-header">
<h2 class="entry-title">Our Drinks</h2>
</header><!-- .entry-header -->
<div class="entry-content">
<h2>Coffee and Espresso</h2>
<p><strong>Drip Coffee</strong> $2.50</p>
<p><strong>Espresso Shots</strong> $3.00</p>
<p><strong>Americano</strong> $4.50</p>
<p><strong>Cappuccino</strong> $4.50</p>
<p><strong>Macchiato</strong> $4.50</p>
<p><strong>Cortado</strong> $4.50</p>
<p><strong>Flat White</strong> $5.00</p>
<p><strong>Latte</strong> $4.50<br>
<em>hot or iced</em></p>
<p><strong>Mocha</strong> $4.50<br>
<em>hot or iced</em></p>
<p><strong>Cold Brew</strong> $4.00<br>
<em>regular or nitro</em></p>
<h2>Other Drinks</h2>
<p><strong>Chai</strong><strong> </strong>$4.50</p>
<p><strong>Iced Tea </strong>$3.50<br>
<em>green, black, or white</em></p>
<p><strong>Hot Tea</strong><strong> </strong>$3.00<br>
<em>english breakfast, ceylon, green, white, chamomile, rooibos, peach</em></p>
<p><strong>Flavored Sodas</strong><strong> </strong>$4.00<br>
<em>raspberry, blueberry, peach, mango, vanilla, mint</em></p>
</div><!-- .entry-content -->
</div><!-- .wrap -->
</div><!-- .panel-content -->
</article>
My question is, how do I get the element with the background image to be fixed.
Here is an example site:
Upvotes: 9
Views: 3430
Answers (7)
Naren Murali
Reputation: 58767
New Answer:
if you add the CSS to the image. It creates the parallax effect you need!
background-attachment: fixed;
position: fixed !important;
object-fit: cover;
height:100%;
It should be inserted in the image element as so.
<img src="http://www.grogenex.com/wp-content/uploads/2017/07/cropped-canabis.jpg" width="2000" height="1200" alt="Grogenex" srcset="http://www.grogenex.com/wp-content/uploads/2017/07/cropped-canabis.jpg 2000w, http://www.grogenex.com/wp-content/uploads/2017/07/cropped-canabis-300x180.jpg 300w, http://www.grogenex.com/wp-content/uploads/2017/07/cropped-canabis-768x461.jpg 768w, http://www.grogenex.com/wp-content/uploads/2017/07/cropped-canabis-1024x614.jpg 1024w" sizes="100vw" style="
background-attachment: fixed;
position: fixed !important;
object-fit: cover;
height:100%;
">
Also if you add this to the .panel-image it will create the same parallax for mobile also!
.panel-image{
background-attachment: fixed !important;
}
Please let me know if this fixes your issue!
Old Answer:
In the initial CSS you provided in the question the image was already fixed. Are you trying to achieve something like this?
.panel-image {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
width: 100%;
height: 200px;
position:absolute;
top:0px;
}
.twentyseventeen-panel {
position: relative;
}
.entry-content{
margin-top:200px;
}<article id="panel1" class="twentyseventeen-panel post-47 page type-page status-publish has-post-thumbnail hentry">
<div class="panel-image" style="background-image: url(https://2017.wordpress.net/wp-content/uploads/2016/10/pexels-photo-30724-2000x1200.jpg);">
<div class="panel-image-prop" style="padding-top: 60%"></div>
</div><!-- .panel-image -->
<div class="panel-content">
<div class="wrap">
<header class="entry-header">
<h2 class="entry-title">Our Drinks</h2>
</header><!-- .entry-header -->
<div class="entry-content">
<h2>Coffee and Espresso</h2>
<p><strong>Drip Coffee</strong> $2.50</p>
<p><strong>Espresso Shots</strong> $3.00</p>
<p><strong>Americano</strong> $4.50</p>
<p><strong>Cappuccino</strong> $4.50</p>
<p><strong>Macchiato</strong> $4.50</p>
<p><strong>Cortado</strong> $4.50</p>
<p><strong>Flat White</strong> $5.00</p>
<p><strong>Latte</strong> $4.50<br>
<em>hot or iced</em></p>
<p><strong>Mocha</strong> $4.50<br>
<em>hot or iced</em></p>
<p><strong>Cold Brew</strong> $4.00<br>
<em>regular or nitro</em></p>
<h2>Other Drinks</h2>
<p><strong>Chai</strong><strong> </strong>$4.50</p>
<p><strong>Iced Tea </strong>$3.50<br>
<em>green, black, or white</em></p>
<p><strong>Hot Tea</strong><strong> </strong>$3.00<br>
<em>english breakfast, ceylon, green, white, chamomile, rooibos, peach</em></p>
<p><strong>Flavored Sodas</strong><strong> </strong>$4.00<br>
<em>raspberry, blueberry, peach, mango, vanilla, mint</em></p>
</div><!-- .entry-content -->
</div><!-- .wrap -->
</div><!-- .panel-content -->
</article>Upvotes: 2
Alireza
Reputation: 104910
The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
So instead of position: fixed; in your code, do background-attachment: fixed;...
.panel-image {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
width: 100%;
height: 200px;
}
Upvotes: 0
Robert Livingston
Reputation: 79
Well, what you are trying to do is have your mobile version retain the parallax effect like the desktop version, while maintaining responsiveness for cross0browser support. The ability to keep parallax effect on mobile can be achieved with the following CSS property added to your current code, background-attachment. This will state whether the image should move or stay at a fixed position in regards to the viewport, or when a user scrolls on your site. No extra code needed.
.panel-image {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
position: relative;
background-attachment: fixed;
}Hope this helps in your endeavors.
Upvotes: 2
mvdelrosario
Reputation: 103
I believe you want to achieve a parallax effect. Unfortunately, it is not achievable with applying position:fixed. Just like what others have mentioned, background-attachment:fixed might help.
Here's a good resource for achieving a pure css parallax/semi-parallax http://thetotobox.com/blog/easy-pure-css-parallax-effect-tutorial/
Upvotes: 2
MarioE
Reputation: 175
This is another approach for that, it does not use "background-attachment" or "position: fixed".
.panel-image {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
position: relative;
z-index: 0;
width: 100%;
height: 100%;
}
.twentyseventeen-panel {
overflow: hidden;
position: relative;
height: 400px;
}
.panel-content {
position: absolute;
top: 0 !important;
left: 0 !important;
overflow: auto !important;
height: 100%;
width: 100%;
z-index: 1;
}
.panel-content > .wrap {
position: relative;
background: rgba(255,255,255,0.8);
top: 200px;
}<article id="panel1" class="twentyseventeen-panel post-47 page type-page status-publish has-post-thumbnail hentry">
<div class="panel-image" style="background-image: url(https://2017.wordpress.net/wp-content/uploads/2016/10/pexels-photo-30724-2000x1200.jpg);">
<div class="panel-image-prop" style="padding-top: 60%"></div>
</div><!-- .panel-image -->
<div class="panel-content">
<div class="wrap">
<header class="entry-header">
<h2 class="entry-title">Our Drinks</h2>
</header><!-- .entry-header -->
<div class="entry-content">
<h2>Coffee and Espresso</h2>
<p><strong>Drip Coffee</strong> $2.50</p>
<p><strong>Espresso Shots</strong> $3.00</p>
<p><strong>Americano</strong> $4.50</p>
<p><strong>Cappuccino</strong> $4.50</p>
<p><strong>Macchiato</strong> $4.50</p>
<p><strong>Cortado</strong> $4.50</p>
<p><strong>Flat White</strong> $5.00</p>
<p><strong>Latte</strong> $4.50<br>
<em>hot or iced</em></p>
<p><strong>Mocha</strong> $4.50<br>
<em>hot or iced</em></p>
<p><strong>Cold Brew</strong> $4.00<br>
<em>regular or nitro</em></p>
<h2>Other Drinks</h2>
<p><strong>Chai</strong><strong> </strong>$4.50</p>
<p><strong>Iced Tea </strong>$3.50<br>
<em>green, black, or white</em></p>
<p><strong>Hot Tea</strong><strong> </strong>$3.00<br>
<em>english breakfast, ceylon, green, white, chamomile, rooibos, peach</em></p>
<p><strong>Flavored Sodas</strong><strong> </strong>$4.00<br>
<em>raspberry, blueberry, peach, mango, vanilla, mint</em></p>
</div><!-- .entry-content -->
</div><!-- .wrap -->
</div><!-- .panel-content -->
</article>Upvotes: 4
masterpreenz
Reputation: 2300
Just simply use background-attachment: fixed; this will create a simple parallax effect in mobile without JavaScript though just make sure it appends on mobile:
// make sure this is mobile width
@media screen and (max-width: 480px) {
.panel-image {
background-attachment: fixed;
}
}
and there you go.
Upvotes: 3
Giovanni Mesquita
Reputation: 165
If I understood your question, are you trying to do this?
.panel-image {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
position: fixed;
width: 100%;
height: 200px;
z-index: -1;
top: 0;
left: 0
}
.twentyseventeen-panel {
overflow: hidden;
position: relative;
}
.panel-content {
background-color: #fff;
margin-top: 200px;
padding: 0.1em 1.5em;
}<article id="panel1" class="twentyseventeen-panel post-47 page type-page status-publish has-post-thumbnail hentry">
<div class="panel-image" style="background-image: url(https://2017.wordpress.net/wp-content/uploads/2016/10/pexels-photo-30724-2000x1200.jpg);">
<div class="panel-image-prop" style="padding-top: 60%"></div>
</div><!-- .panel-image -->
<div class="panel-content">
<div class="wrap">
<header class="entry-header">
<h2 class="entry-title">Our Drinks</h2>
</header><!-- .entry-header -->
<div class="entry-content">
<h2>Coffee and Espresso</h2>
<p><strong>Drip Coffee</strong> $2.50</p>
<p><strong>Espresso Shots</strong> $3.00</p>
<p><strong>Americano</strong> $4.50</p>
<p><strong>Cappuccino</strong> $4.50</p>
<p><strong>Macchiato</strong> $4.50</p>
<p><strong>Cortado</strong> $4.50</p>
<p><strong>Flat White</strong> $5.00</p>
<p><strong>Latte</strong> $4.50<br>
<em>hot or iced</em></p>
<p><strong>Mocha</strong> $4.50<br>
<em>hot or iced</em></p>
<p><strong>Cold Brew</strong> $4.00<br>
<em>regular or nitro</em></p>
<h2>Other Drinks</h2>
<p><strong>Chai</strong><strong> </strong>$4.50</p>
<p><strong>Iced Tea </strong>$3.50<br>
<em>green, black, or white</em></p>
<p><strong>Hot Tea</strong><strong> </strong>$3.00<br>
<em>english breakfast, ceylon, green, white, chamomile, rooibos, peach</em></p>
<p><strong>Flavored Sodas</strong><strong> </strong>$4.00<br>
<em>raspberry, blueberry, peach, mango, vanilla, mint</em></p>
</div><!-- .entry-content -->
</div><!-- .wrap -->
</div><!-- .panel-content -->
</article>Upvotes: 3
Related Questions
- Position fixed not working in mobile browser
- position: fixed doesn't work on iPad and iPhone
- Why fixed position not working on mobile device?
- What is the problem about "fixed" position in Firefox mobile?
- position: fixed doesn't work on chrome/firefox mobile mockup (and mobile), but works when I resize window
- Fixed positioned header persists on desktop but not on mobile?
- Fixed Div disappears in mobile browsers
- CSS position:fixed not fixed in Mobile Safari... again
- position:fixed not working on mobile, works on desktop
- Fixed position on a mobile browser