Title: Responsive background image
Last modified: June 3, 2020

---

# Responsive background image

 *  Resolved [emisputans](https://wordpress.org/support/users/emisputans/)
 * (@emisputans)
 * [6 years ago](https://wordpress.org/support/topic/responsive-background-image-7/)
 * Hello!
 * I am struggling with making the background image of the site mobile responsive.
   
   The problem is that the picture is taken in landscape and because of that, when
   the site is opened in a portrait mode on a mobile device, the background image
   of the first page occupies only about half of the screen; when the device is 
   switched to landscape position, it is all fine, of course. I have tried to add
   different types of code to the Custom CSS but nothing really seems to work properly.
 * One of the variety was this code:
 * div {
    width: 100%; height: 400px; background-image: url(‘img_flowers.jpg’); 
   background-size: cover; }
 * this was kind of what I was looking for, except it messed up the header section,
   meaning that in the desktop version of the site the logo of the site and the 
   main menu shifted a few centimeters down, moreover in the mobile version when
   I pressed “hamburger” button, there was a big grey space between the top of the
   menu and the first menu item “Par meditāciju”.
 * I was also looking for an option to switch between different images depending
   on the screen size and I added a code like this in Custom CSS :
 * /* For width smaller than 400px: */
    body { background-image: url(‘img_smallflower.
   jpg’); }
 * /* For width 400px and larger: */
    [@media](https://wordpress.org/support/users/media/)
   only screen and (min-width: 400px) { body { background-image: url(‘img_flowers.
   jpg’); } }
 * but nothing changed at all (of course, I changed the “background-image: url” 
   line to suit the titles of images that I have in my library). I am very new to
   CSS, that’s maybe why I am not very with successful with this…
 * I will appreciate any help, hint, suggestion!
    Thanks!
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fresponsive-background-image-7%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

The topic ‘Responsive background image’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/bento/2.5/screenshot.png)
 * Bento
 * [Support Threads](https://wordpress.org/support/theme/bento/)
 * [Active Topics](https://wordpress.org/support/theme/bento/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/bento/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/bento/reviews/)

 * 0 replies
 * 1 participant
 * Last reply from: [emisputans](https://wordpress.org/support/users/emisputans/)
 * Last activity: [6 years ago](https://wordpress.org/support/topic/responsive-background-image-7/)
 * Status: resolved