Archived topic
Different background image on each page / Container smaller
7 replies · Started by Christoph on March 9, 2018
Hello GeneratePress support,
I am trying on this page: http://www.uepconsult.com/acerca-de-nosotros/
(1) I have put a background image with
body {
background-image: url('http://www.uepconsult.com/wp-content/uploads/2018/03/uepnosotros.jpg')
}BUT what is the optimal size for the image, so thats shown well on all screens? Or how can I make this background responsive?
and
(2) How can I make the container width smaller (just on this page) ?
Hi there,
1. Unfortunately background image aren't responsive by nature. I think in your case it's best to set separate image for mobile and tablet using this method: https://docs.generatepress.com/article/responsive-display/
2 This CSS should do:
body .site.grid-container {
max-width: 1000px;
}Let me know if this helps :)
Hi Leo,
with this body .grid-container I made it to 800px
BUT also the logo and menu is smaller ...
See Homepage: 
See About us page: 
I just want the content container smaller ... and left align with the same padding as the logo ...
My bad. Edited the code above.
Ok, thats work ... And now the container left with the same padding as the logo ?
Like remove the padding?
If so try this:
.separate-containers .inside-article {
padding-left: 0;
}I want the container more to the left, align with the logo ... May this picture explain, what I want:
try this CSS:
.site.grid-container {
margin-left: 200px;
}