Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 6, 2015 at 9:33 pm #375858
    kimoribj

    Hi!

    I made this page:

    http://www.kilmo.de/k

    and added three background imgaes to the different colorsections ‘by hand’ with the following css:

    #gallery {
    background-image: url(../../uploads/diagonal-bg-r1.png), url(../../uploads/diagonal-bg-r2.png),url(../../uploads/gallery.jpg);
    background-size: contain, contain, cover;
    background-repeat: no-repeat;
    background-position: top, bottom, left top;
    background-attachment: scroll, scroll, fixed;
    }

    For desktop computers it works fine: the main background image is fixed and the content (including the diagonal images for top and bottom) are scrolling over that image.

    On mobile it seems that its not possible to have the same effect. the main image is way toooo big and pixelated and there is no scrolling effect. Is there a way to do that for mobiles?
    If it shouldnt be able for mobiles, how can I remove the main background image (the fixed one) so that one can at least see the color of the background?

    I hope I could explain my problem properly… It would be really great if someone could help me with this problem!

    Thanks!

    January 6, 2015 at 9:44 pm #375861
    kimoribj

    just found out that I see the background picture for about 0.5 seconds like it should and then it scales up toooo big.

    I use an iphone if it should make a difference…

    January 7, 2015 at 7:13 pm #376334
    Elliott

    Hi!

    When you set the background size to cover then it’s going to stretch it to fit the whole area so if you have a lot of content in the color section then it will because very pixellated because it has to stretch.

    Why are you setting the backgrounds via CSS? The color sections already have an option to set a background image.

    Cheers!
    Elliott

    January 7, 2015 at 8:38 pm #376414
    kimoribj

    Ah, Ok, I see. But the scrolling effect still doesnt work on mobile devices. On Desktops everything works fine.

    The thing is like I mentioned above that I have 3 different backgroundpictures. One is the main picture that ‘stands still’ and the other two are triangles that are attacht to the bottom and top of the colorsection and scroll with the content.

    I wasnt able to achieve that with the build in funktion. Or if so, how would it be possible?

    Thanks!

    January 7, 2015 at 8:39 pm #376415
    kimoribj

    I think it only should cover the whole screen, not the whole content of the colorsection, right?

    January 8, 2015 at 6:21 am #376646
    Ismael

    Hey!

    Try to use css instead of diagonal images. Example:

    #intro:before {
content: '';
display: block;
background: blue;
width: 100%;
height: 100px;
position: absolute;
bottom: -50px;
transform: skewY(3deg);
}

div#intro {
position: relative;
overflow: hidden;
}

    Cheers!
    Ismael

    January 8, 2015 at 11:34 am #376706
    kimoribj

    Thank you! Now I have made everything new with css diagonals only!

    But still the same problem: the background-image is not fixed, ‘sticky’. I would like that the content below scrolls over it.

    Maybe this is just not possible for mobile devices?

    January 8, 2015 at 11:39 am #376710
    kimoribj

    If its not possible, how could i remove the background-images for the sections on mobile devices?
    I know something with @media… but I wasnt able to do it properly. Thanks!

    January 8, 2015 at 4:40 pm #376830
    Yigit

    Hey!

    It is not possible to make background images fixed on mobile unfortunately. You can remove background images from color sections on mobile using following code

    @media only screen and (max-width: 480px) {
.avia-section {
background: none!important;
}}

    480px is screen width, you can increase it as needed

    Best regards,
    Yigit

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.