Background image
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