[Resolved] Preventing resizing of background image for website body

[Adam]

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 1920×1100 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.

[David]

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.

[Adam]

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,

[David]

We can use media queries around some CSS like so:

@media (max-width: 768px) {
	body {
		background-image: url("full_url_to_image");
	}
} 

[Adam]

Awesome thank you for your help David!

[David]

You’re welcome

[Author]

Posts