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:
7 Answers
Answers 1
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>Answers 2
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>Answers 3
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>Answers 4
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.
Answers 5
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/
Answers 6
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.
Answers 7
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; } 
0 comments:
Post a Comment