Archived topic
Preventing resizing of background image for website body
5 replies · Started by Adam on December 24, 2018
Hello,
I am using a background image on the body of the site and I am having trouble with it. It keeps resizing based on how much content is on the various pages. The only way around this I could find was by having it set to fixed, with the parallax affect and that keeps it the same size across all pages.
Is there a way to do this while having it set to attached, not fixed? I did try the other various settings, cover/contain/100% width/Auto but they all seemed to still allow it to stretch/shrink differently on each page. Does the image need to be really big and set to contained for this not to happen? Its 1920x1100 right now.
If the only way to keep it consistent on all pages is by setting it to fixed and not as an attachment, how can I make that happen on the tablet sized screens? It seems to not work when I check the site with an Ipad.
Also wondering how to apply these various settings based on the viewing device width as it looks like I might need to resize it differently for mobile.
Thank you for your help.
Hi there,
the 100% Width option should size the background image to the width of the browser / device. More content on the page (vertical height) shouldn't effect the image size. This happens with cover as scales both horizontally and vertically.
Hi David,
Yes it seems to be working as intended now with that setting when I resize the window on my desktop.
Also wondering though if its possible to select the background image based on the device width so I can change their individual CSS properties?
Thank you,
We can use media queries around some CSS like so:
@media (max-width: 768px) {
body {
background-image: url("full_url_to_image");
}
} Awesome thank you for your help David!
You're welcome
