Forums

background page in control

Permalink
Hello,

A customer of mine would like to have a background picture.

I already did this by using a plugin. You can see the results here:http://www.marnan.nl/en-us/home...

The issue is that the photo has the word MARNAN which changes position according to the size of the screen.

I found this page:http://www.nissandobbe.nl/micra.html... where even though the size of the picture changes, if you pay close attention you will see that the image doesn't change position.

In other words, it seems like the image is somehow locked on its position and just changes the size.

Is there a way (free or not free) that this can be done in concrete? I am willing to pay someone to do it if that requires work.

Thanks.
 
siton replied on at Permalink Reply
siton
In micra example they use "cover" property:
padding: 200px 0 60px;
    background-image: url(../resources/Micra/micra00@big.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #ffffff;


Example:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_backgro...
- - - - - - - - -
In your example it's not Background but <img> tag (image). You don't need any plugin for this effect. Only add this CSS lines to some image and that's it:
element.style {
    position: fixed;
    width: 100%;
    height: auto;
    top: 0;
}

"PROBLEM":
In your CSS the width is with PIXEL dimensions = Not responsive
siton replied on at Permalink Reply
siton
One more idea for this effect:
https://www.w3schools.com/howto/howto_css_parallax.asp...
admin replied on at Permalink Reply
Hey siton,

wow that's quite a lot of great info!

I am not sure if i did it right. Can you please check?
siton replied on at Permalink Reply
siton
Looks good :)