How to get the section background image fix?

Back to discussions

Showing 1 – 5 of 5 replies

vinceyuan PURCHASED

2 years ago

Hi.
The background image scrolls with the mouse. I thought it was the default. But I found layout.css 80 as below, it showed the background-attachment is fixed but not scroll.
section {
display: block;
position: relative;
padding: 80px 0;
border-bottom:rgba(0,0,0,0.1) 1px solid;

-webkit-transition: all .400s;
-moz-transition: all .400s;
-o-transition: all .400s;
transition: all .400s;

background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;

So I put the "background-attachment: fixed;" into the style (style="background-image:url('assets/images/doodly/lightpurple1.png'); background-attachment:fixed; " ) , but that also failed.

Please advise how can I get the section background image fix? Thanks!

stepofweb SELLER

2 years ago

Hello vinceyuan,

1. If you need a fixed background, make sure that the .jarallax class is removed (that's wjhy the image scrolls with the mouse).

2. You can use .bg-fixed class instead of CSS (because will force the background to be fixed using !important).

3. So the code should look like this:
<section class="bg-cover bg-fixed" style="background-image:url('assets/images/doodly/lightpurple1.png');">

Smarty v5 only (if you don't want <section> tag)
<div class="section bg-cover bg-fixed" style="background-image:url('assets/images/doodly/lightpurple1.png');">

Hope this helps.

Thanks,
Dorin

Last edited 2 years ago

vinceyuan PURCHASED

2 years ago

Hi Dorin,

Thanks for your prompt reply.

I would like to keep option 2 mostly.
But I tried <section class="bg-cover bg-fixed" style="background-image:url('assets/images/doodly/lightpurple1.png');">, and it doesn't seem to work on my site. Anyother code,please?

Could you detail how to remove the .jarallax class? (Sorry, I don't know where it is.)

Thanks.

Vince

stepofweb SELLER

2 years ago

Jarallax class should be added to your code like this:
class="... jarallax ...."

Is there a possibility to share the link of your page? Would be easier to debug.

Thanks,
Dorin

vinceyuan PURCHASED

2 years ago

Hi Dorin,

For example:

【smarty: index-corporate-2.html :1436】


<section class="parallax parallax-2 padding-xxs" style="background-image: url('assets/images/demo/vision-min.jpg');">
<div class="overlay dark-4"></div>

<div class="container">

<div class="row countTo-md text-center">

<div class="col-xs-6 col-sm-3">
<i class="fa fa-users"></i>
<span class="countTo" data-speed="3000">1303</span>
<h5>HAPPY CLIENTS</h5>
</div>

<div class="col-xs-6 col-sm-3">
<i class="fa fa-code"></i>
<span class="countTo" data-speed="3000">56000</span>
<h5>LINES OF CODE</h5>
</div>

<div class="col-xs-6 col-sm-3">
<i class="fa fa-twitter"></i>
<span class="countTo" data-speed="3000">4897</span>
<h5>TWITTER</h5>
</div>

<div class="col-xs-6 col-sm-3">
<i class="fa fa-facebook"></i>
<span class="countTo" data-speed="3000">9877</span>
<h5>FACEBOOK</h5>
</div>

</div>

</div>
</section>


I tried to put "bg-cover bg-fixed" into the class, but the background image still scrolls.

vinceyuan PURCHASED

2 years ago

Hi Dorin,

The link to my site is http://yingxiy48.sg-host.com/index.html.

Thanks.
Vince

Last edited 2 years ago

Discussion on Smarty - Website + Admin + RTL

How to get the section background image fix?