Community Forums › Forums › Archived Forums › Design Tips and Tricks › Align Background Image on Mobile
Tagged: agency pro, align, background, css, mobile
- This topic has 1 reply, 2 voices, and was last updated 9 years, 8 months ago by Gandt.
-
AuthorPosts
-
February 26, 2015 at 9:12 am #142368brant1121Participant
Is it possible to align the background image to the left on mobile devices for the Agency Pro theme? The couple pictured on the background get cut off when it resizes to a smaller/vertical layout. Any ideas?
Thanks,
http://181.224.137.164/~bcreated/docrockdds.com/
BrantFebruary 26, 2015 at 6:43 pm #142454GandtMemberBrant
The problem is that the background is not getting resized as the width of the device narrows.
Even if you were to align it to the left, the issue would be the same. Align right would fix it partially but I have something better for you:What you first need to do is use the css background rule. It gives you much more flexibility when it comes to handling what you do with an image than if you just add it directly to the markup.
If for whatever reason you cannot remove it from the backstretch container it is under, just add this custom css line to your primary stylesheet:
.backstretch img {display:none;}
(I personally would remove the entire backstretch element entirely, it is useless)
The next issue you're up against is that the navbar area ( the <header> element and all it contains ) takes more space (out of the screen's totality) as you go down in screen width (when you move from 1024px or higher to 1023px or lower) so that, even resizing the background size doesn't cover you entirely when you go down to the lowest resolutions.
This means that, the background image, if you want it to appear notoriously throughout all resolutions, has to be added to the element that follows the nav area, which in this case is:
.site-container
So, to said .site-container class you add the following css rules:
.site-container { background: url(http://181.224.137.164/~bcreated/docrockdds.com/wp-content/uploads/2015/02/ames_dentist.jpg) no-repeat fixed center top transparent; background-size: 100% auto; padding-top:108px; }
I use 'fixed' instead of 'scroll' in background to make sure the image stays put and doesn't go anywhere as you scroll, which I believe was the originally intended approach. (Do correct me if I am mistaken)
I then use background-size 100% auto to make sure that the image resizes proportionately to the width of the screen regardless of its width.
I changed padding-top to 108px (you had 120px) because there was an excess of padding, 108 matches the exact size the navbar + its bottom border are taking up.
The only missing piece in this whole fix is the problem caused by the changing nav area's height ( the <header> element and all it contains ) depending on your 1023/1024px screen width.
So, we are going to modify our original css rule for the background image when this happen to adapt to the increased <header> height. Looking through your css, I found the key media query:
@media only screen and (max-width: 1023px) {
So, under this media query, you have this:
.site-container { padding-top: 105px; }
Which we change into this:
.site-container { padding-top:0; background-position:center 265px; }
Padding-top:0 because it only pushes your content further down and because it has no effect over the position of the bg image.
Background position center 265px because center (horizontal center) and 265px because that is the height of your navbar area ( the <header> element and all it contains )The image now performs as you wanted, BUT, there are still some issues I came across:
1.- You need to modify your intro content (via your queries) to make sure it adapts properly. It did fine for wide resolutions but as we got closer to the smallest ones, it was just too big and was sucked in by the <header> element. You need to add proper padding wherever you deem relevant depending on the kind of look you're after.
2.- If you resize your window's width from 1200+ down to 300'ish, you will notice that, across the way, there are certain breaking points in the design that need to be addressed.
3.- For the smallest resolution, if you want to be able to see the couple...take in mind that takes resizing, and when that happens, the image's height is reduced too, which means, after only a few pixels, it ceases to cover the entire background of the page as it did with the higher resolutions.
I hope this helps.
If you have any doubts, don't hesitate to ask again.Regards
Gandt -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.