Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 4, 2020 at 8:45 am #264711
    Heinz
    Participant

    Hello
    I have redesigned the https://vah.ch/galerien/ page. I added a background image for her. It took me hours to set this up the way I wanted. So that I always bring the background image to the edge, I added the following code:
    @media screen and (max-width: 500px) {
    .post-1166
    {
    margin-left: -8%;
    margin-top: -11%;
    margin-right: -8%;
    }
    }

    @media     screen and (min-width: 501px) and (max-width: 900px) {
    .post-1166
    {
    margin-left: -6%;
    margin-top: -8%;
    margin-right: -8%;
    }
    }

    @media     screen and (min-width: 901px) and (max-width: 2000px) {
    .post-1166
    {
    margin-left: -5%;
    margin-top: -7%;
    margin-right: -5%;
    }
    }

    @media     screen and (min-width: 2001px) and (max-width: 5000px) {
    .post-1166
    {
    margin-left: -4%;
    margin-top: -5.5%;
    margin-right: -4%;
    }
    }

    @media     screen and (min-width: 5001px)
    {
    .post-1166
    {
    margin-left: -4%;
    margin-top: -6%;
    margin-right: -4%;
    }
    }

    I inserted the background image as follows:

    .page-id-1166 .wrapper {
    max-width: 100%;
    max-height: 100%;
    }
    .post-1166 {
    background: url (“https://vah.ch/wp-content/uploads/2020/08/VAH08727-kleiner-Ausschnitt-a.jpg”) 50% 50% no-repeat;
    background-repeat: no-repeat.
    “background-color: red;
    background-position: left top;
    background-attachment: fixed;
    background-size: cover;
    }

    Actually, I am quite satisfied and I am also proud that I managed that. However, the following happened to me:
    – The publication area is now as wide as the page resp. the background image. It’s not that nice, but I can live with it.
    – The background is not fixed on the smartphone and the iPad and the gallery images do not scroll over them. The background image is simply given a fixed size depending on the page content. At first I thought that this was the browser, but the same problem occurs on the smartphone with a different browser.
    – The bottom of the foot area on the side is also enlarged, is not so nice.

    Now my questions:
    – Is there a simpler way to insert a fixed background image that is filled to the edge?
    – Is there a possibility to set the width of the background image and the public area separately?
    – Can the width of the footer line be adjusted separately or does it simply have to be hidden on this page?

    I would be happy if you could give me ideas on how I can continue.

    Many thanks.

    Best regards
    Heinz

    November 5, 2020 at 3:36 am #264798
    Skandha
    Participant

    @henebe: Hello Heinz,

    For the background issue on ios devices
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    .post-1166 {
    background-attachment: scroll;
}

    You can set the width of the background image by using the CSS property background-size: like in this demo.

    Can you please elaborate how you want to adjust the width of footer?

    Let me know if this helps you out!
    Kind Regards,
    Skandha

    November 5, 2020 at 11:44 am #264848
    Heinz
    Participant

    Hello Skandha
    Thank you for your help.
    The “background-attachment:” is intentionally set to “fixed” because I want the background to remain and the foreground to flow over it. I would also like to achieve that on my smartphone. But the smartphone behaves like it is set to “scroll”.

    Thank you for the link to the demo for setting the background image. I know these commands. but there is still a margin at the top and the side with this theme. I then remove it with “@medie screen”. It’s just a little awkward. I believe there is a better variant, but I cannot find it in any documents.

    This method then enlarges the page and accordingly the footer list, which is then larger than that of the other side. Of course I want this to be the same size as the other sides.

    Thank you for your help.

    Best regards
    Heinz

    November 5, 2020 at 12:15 pm #264852
    Heinz
    Participant

    Hello Skandha
    Now I’ve found something else. If I type that like this:

    / * Background image on page gallery test /
    .page-id-1166 .wrapper {
    background: url (“https://vah.ch/wp-content/uploads/2020/08/VAH08727-kleiner-Ausschnitt-a.jpg”) 50% 50% no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
    max-width: 100%;
    max-height: 100%;

    And leave out @medie screen. Then the background image is displayed up to the edge. However, there is a border at the top of the slider, but the head ridge is also filled with the image. I think I’m close.

    November 6, 2020 at 8:24 am #264967
    Skandha
    Participant

    @henebe: Hello Heinz,
    Can you please let me know where there is a border at the top of the slider? I don’t seem to see it at my end.

    Kind Regards,
    Skandha

    November 6, 2020 at 12:00 pm #264991
    Heinz
    Participant

    On my active page (https://vah.ch/galerien/) I solved this as follows. See CSS below.
    But this has the following problems:
    Fill in the margins with @media screen, just enlarge the page
    The publication area is getting wider and the page footer is bigger. In addition, the gaps are not always exactly filled in, depending on the screen and window size, or the margins to the publication area vary greatly in some cases.

    Now I have presented my 3 variants. But none of them work properly. I think you can do better, but I can’t find any better information on the web.

    / * Background image on page gallery * /
    .page-id-1166 .wrapper {
    max-width: 100%;
    max-height: 100%;
    }

    .post-1166 {
    background: url (“https://vah.ch/wp-content/uploads/2020/08/VAH08727-kleiner-Ausschnitt-a.jpg”) 50% 50% no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
    }

    / * Alignment wallpaper gallery * /

    @media     screen and (max-width: 500px) {
    .post-1166
    {
    margin-left: -8%;
    margin-top: -11%;
    margin-right: -8%;
    }
    }

    @media     screen and (min-width: 501px) and (max-width: 900px) {
    .post-1166
    {
    margin-left: -6%;
    margin-top: -8%;
    margin-right: -8%;
    }
    }

    @media     screen and (min-width: 901px) and (max-width: 2000px) {
    .post-1166
    {
    margin-left: -5%;
    margin-top: -7%;
    margin-right: -5%;
    }
    }

    @media     screen and (min-width: 2001px) and (max-width: 5000px) {
    .post-1166
    {
    margin-left: -4%;
    margin-top: -5.5%;
    margin-right: -4%;
    }
    }

    @media     screen and (min-width: 5001px)
    {
    .post-1166
    {
    margin-left: -4%;
    margin-top: -6%;
    margin-right: -4%;
    }
    }

    November 9, 2020 at 10:05 am #265221
    Skandha
    Participant

    @henebe: Hello Heinz,
    Can you please attach screenshot of the issue so that it can be more clearer?

    Kind Regards,
    Skandha

    November 24, 2020 at 4:23 am #266466
    Heinz
    Participant

    Hello Skandha
    Did you see the screenshots?
    https://vah-test.ch/?page_id=202
    Thank you for your help.
    Best regards
    Heinz

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Background image’ is closed to new replies.