Background image not appearing on Mobile Browser
-
Hi
I have created an RSVP page with a custom background using CSS. This is just a first draft but I notice that when I view the page on a mobile browser the background image is not visible. Is there any way to tweak my CSS so that the image is displayed on both mobile and desktop? My full CSS for the image and RSVP form is below… any suggestions would be appreciated.@media screen and (min-width: 992px) { body.page-id-3648 #main { padding: 30px; border-radius: 30px; background-image: url('https://bbt108.files.wordpress.com/2016/03/testbackgroundv1.jpg'); background-size: 100%; background-repeat: no-repeat; background-position: top; text-shadow: none; font-size: 24px; color: #000; padding-bottom: 0 !important; } .page-id-3648 #footer { clear: both; } } .page-id-3648 #main { max-width: 1156px; margin: auto; } .page-id-3648 .contact-form { padding: 20px; margin-top: 60%; max-width: 400px; background: rgba(255,255,255,0.5); border-radius: 12px; text-shadow: none; font-size: 16px; }The blog I need help with is: (visible only to logged in users)
-
Hi, the link you gave, http://bbtafrica.co.za/bhaktivedanta-swami-lecture-2016/ , is returning a 404 not found error. Did you by chance mean this page, http://bbtafrica.co.za/bsl-rsvp-2016/ , which you referenced in a different thread?
If so, you have declared your background image in a media query set at a min-width of 992px. That means that on screens/windows less that that width, the image will not appear.
You can take that CSS rule out of the media query so that it is applied at all screen widths, but because you are using an image with that information in it, it will begin to overlay your contact form at about 850px in screen/window width. There really isn’t a way to prevent that, and given that you have a max-width set for your contact form at 350px, there really isn’t going to be room for that and your text.
Find this rule in your CSS
@media screen and (min-width: 992px) { body.page-id-3648 #main { padding:30px; border-radius:30px; background-image:url('https://bbt108.files.wordpress.com/2016/03/bsl_rsvp_20161.jpg'); background-size:100%; background-repeat:no-repeat; background-position:top; text-shadow:none; font-size:24px; color:#000; padding-bottom:0 !important } .page-id-3648 #footer { clear:both } }and change the 992px to 192px and save and then view your site on your phone to see what happens.
What would be best is to put the contact form and the text beside it into divs with new CSS classes within your page content and then create CSS rules to make them both about 48% wide and float one left and one right. Then create a media query to take those divs to 100% width and float them both left at about 768px and below.
The top section of text can also be put into a div as text and then you can assign the blue background and border radius styling to #main.
-
Thank you @sacredpath … sincere apologies for the broken link… I updated the page slug and forgot that this would have a knock on effect. As always, you go above and beyond so thank you for spotting the link with my other threads.
I am going to play around with the @media screen width as suggested and will provide feedback.
Thank you as well for the suggestion about the divs … I thought I was being clever by placing all the extra text etc on the image itself to save on CSS input, but obviously this has now had other problems. For this event I will have to leave it as is, but will definitely do divs for the next event that I host. -
Glad to be able to help. If you have any issues with the div solution when you get around to it, just let us know.
-
@sacredpath – this is just an FYI to say thank you for your suggestions above about the divs… I eventually decided to just do it now for this page as I was still having issues. If you want, you can check and correct me if I have not followed the instructions correctly.
For anyone else reading this that might have a similar issue… my CSS is pasted below.
.rsvp-box { float: right; margin-top: 8%; max-width: 600px; margin-right: 2%; } .rsvp-box .clear-box { float: right; padding: 2px 4px 3px 5px; color: #ccc; text-shadow: 0 0; } .page-id-3445 .contact-form { padding: 20px; float: left; margin-top: 10%; max-width: 400px; background: rgba(255,255,255,0.5); border-radius: 12px; text-shadow: none; font-size: 16px; margin-right: 2%; } @media screen and (min-width: 992px) { body.page-id-3445 #main { padding: 30px; border-radius: 30px; background-image: url('https://bbt108.files.wordpress.com/2016/04/bsl-media-background.jpg'); background-size: 100%; background-position: top; text-shadow: none; font-size: 24px; color: #000; padding-bottom: 0 !important; } .page-id-3445 #footer { clear: both; } } .page-id-3445 #main { max-width: 1156px; margin: auto; }As per @sacredpath’s suggestion, I also added this additional media query for small screens.
@media screen and (max-width: 768px) { .rsvp-box { float: left; max-width: 100%; background-image: url('https://bbt108.files.wordpress.com/2016/04/bsl-media-background.jpg'); } }I also added in this additional line so that the header would show on top of the background image when viewing on a mobile browser. This was necessary for me due to the font color and background image color… depending on colors used, this is very optional.
.rsvpheader-box { float: top; line-height: 3em; } -
-
I am actually ecstatic with the outcome … Especially because it took me a while to figure out how to get the CSS and html done right with the different font and images … So I have nothing to offer in return other than to say thank you for your guidance. It is truly appreciated.
-
- The topic ‘Background image not appearing on Mobile Browser’ is closed to new replies.
WordPress.com Forums 