Is there a way to make my background responsive in CSS?
-
Is there a way to make my background responsive in CSS? The theme I am using is Hero and my background image size is 1500 pixels wide by 1000 high.
The blog I need help with is: (visible only to logged in users)
-
Hi, add the following to your custom CSS and see what you think. It will “contain” the background image within the browser window and resize it as necessary. The image will disappear behind the content area at narrower browser window widths and on tablets and phones.
body.custom-background { background-size: contain; } -
Thanks! That worked great to remove the image from spilling into the content area. But I am still not able to have a responsive background. Does anyone out there have experience with picturefill? Is this a possible solution?
-
Maybe I’m misunderstanding what you’re trying to achieve. Could you describe how you picture things looking at table and mobile sizes to give me a better idea of what the end goal is.
-
When original designed, I maximized the image to fill the left and right sides when shown full screen on my desktop. When it was viewed on a laptop the center blog post area cut into the image by half. When viewed on an IPad there was only a fraction of the background displaying on the right side only. Finally there was no background at all visible when viewed on a mobile phone. I hope that better clearifys the problem.
-
OK I think I understand now. This seems to be less a problem about the background and more about how much of a gap there is on either side of your main page area.
Try this to make the page narrower on tablet and smartphones so that more of the background image is visible, be aware that smartphone users particularly will have a worse experience as their screens are already tiny and you are making your content appear in even less space!
@media screen and (max-width: 960px) { #page { width: 80%; } .single-attachment #content, .page-template-page-templatesfull-width-php #content { width: 100%; } } -
Thanks, It seems better but it is still not giving me a responsive background image. Does anyone out there have experience with picturefill? Is this a possible solution?
-
I still don’t understand how you want it to look on a mobile phone, could you explain how the final solution would look instead of how it looks now?
-
The mobile phone theme is not my main concern. I was looking for a consistant background image to display when viewed on a desktop, laptop and tablet. It displays fine on desktop but starts cutting into the image when viewed on other devices.
-
The only issue I can see is that as you get closer to a browser width of 960px the area surrounding your main content gets reduced so there is not much room for the image to be viewed in, however the image does grow and shrink with the window size.
The only other thing I can suggest is changing the max-width breakpoint in the code I gave you before to something like 1100px; so that a larger border around your content is maintained at narrower screen sizes.
-
Thanks will try, I was hoping for CSS that resembles picturefill. I am not sure if this works with wordpress but here is a link that better explains what I am looking for …
http://css-tricks.com/video-screencasts/133-figuring-responsive-images/ -
@charlesdibisceglie, the screencast that you reference is aimed at images within content rather than image within CSS or theme itself, such as background images.
-
- The topic ‘Is there a way to make my background responsive in CSS?’ is closed to new replies.
WordPress.com Forums 