How To Make Divi Background Images Responsive

hey everyone it's nelson miller here with pa creative today i have a tutorial about how to make a responsive background image in a section in divi so we're going to go over some tips and tricks and just show you some things that you may not be aware of and yeah just cover everything about trying to get that like a hero section or any other section background image responsive let's take a look as always if you're watching this on youtube click the link in the description down below now today i don't have any code snippets usually i do and then you'll link you know and go over to the blog post here and and see the snippets but anyway so i've seen this a lot people ask questions in the divi facebook groups like they're struggling with making a background image in a like usually a hero section the section at the top of your home page making that responsive they're having trouble with it so i want to go over some things that will help now i kind of joke here about breaking the laws of physics because i think sometimes people think there's this problem with divi or something and there's not you know divi can't break the laws of physics so anyway let's get that out of the way right away um don't expect that to happen but i i am going to show you some things now background images i have this as my first point here because keep in mind they're decorative they're not functional so sometimes i think people stress a little bit too much over the background images where they think like the background image is used to show something that's really important for their website but at the same time you have to ask yourself should you be using it in that way take a look at what i've wrote here some of it's about seo so there's no alt text alternative text in a background image in divi so it's not really serving a function other than looking nice so don't like use something that you need to you know you're using you're optimizing your page for seo so don't assume that you can like have that as part of that it's not the background image is separate so i guess i'm kind of demoting the background image first of all to like you know set the standard here but anyway um take a look at that if you're unfamiliar with that anyway so in divi the background image settings can be found in you know sections rows columns modules it's all the same so inside there you'll see there's always the four tabs in the background color the background gradient background image and a video so those are the standard things now we're mostly talking about the image here today we'll touch on one or two of the others here but anyway we're talking about the background images so you can find them in that third tab i'll be following along here um in a live in his live site so in in this particular you know section that i have in my demo i opened it up background content tab background that's where you're always going to find it and then click on image now before we go any further we're talking about responsiveness take notice there are there are no responsive settings for like background image size background image position all this stuff there's only one right here under background on the main background there's this phone icon you know to open these tabs desktop tablet phone that's the only one for all these settings it applies to all of these okay that seems odd to me i think that's a mistake in divi but we're gonna roll with it um by the way if you're surprised that we even have these settings they did not appear i have it written here they did not appear until version 3.27 which was in august of 2019 so you may not even have realized that that was when they had that source that update the responsive images update and they threw these in and didn't even announce it i saw it but no one else like they didn't talk about it anyway so there are responsive settings for all the background image settings it's just that they all apply so like you know real quick let me show you like if i'm on the desktop tab and i want it to be on cover and maybe you know top right i may change that for tablet and it's it's going to apply those changes like i don't have an individual setting most settings in div you have the individual tabs for each one here right so i'm just pointing that out all right let's get started the first tip that i have here number one is use a different background image now this may sound so obvious but it's not um i i often will come in here you know i'm working on my desktop here and i don't even have that open a lot of times and i'll just come in here and grab a background image right something that i want from my site and there it is and that's it you know when i change it to you know tablet phone you know it's that's it like i don't think about changing it but you can so watch um when i open i'm on tablet here but i'll open my responsive tabs so again right here tab well desktop shows that and then i can click on tablet and i can pick a different one whatever this boat here i don't know why i have c related things but anyway so now it's showing that there that there and it always it always takes the the higher one above it to the lower tab if that makes sense so since i set the boat and tablet it's also showing in phone so there you go like my point to this one is on desktop yeah sure this whole i don't know this scene with the boat i'm gonna add some padding just so you can so like there maybe i really really like this the way like maybe i have my text centered and everything right but well then i go to mobile and a lot of people freak out because it's like well i don't even know what that is um if i had the boat there yet you know what i'm saying here let's just put that in just to show you so it might be like ah i don't want that um so anyway i could have a i could have a vertical orientation a portrait orientation image that i want there so that's my tip use a different image maybe maybe it's a portrait photo or something that you know is going to work on a smaller screen and then you know play around here with the with the sizes all right that's number one number two goes right along with that and i'm just going to continue that thought maybe i don't want a background image on phone and you may say well that why if it's already there well watch i can delete it and i could i could go over here and i could make it green right and so watch when i'm on tablet it's the boat when i'm on desktop it's the you know the the port there whatever and then when i come back here to phone again i don't need a photo i could have it white because it may be distracting just because it's small it may not fit right so there you go just change it for per your device all right that goes right along with that one now another one you may not have thought of is to change the background image position and again these settings were not available before the the 3.27 update in august of 2019 but anyway you have all these settings top left top center top right you know center left center center right bottom left bottom center bottom right and a lot of times you know we come in here and we put our photo in and we're like okay you know we're putting our photo in it so it's just one it's just usually on center like that right by default i changed that earlier so depending how this image was if there was something or even depending where i had my text and my buttons i may want this to be you know um center right well it's not the changing because of its its full size here um let's see let's try a different one top set well that changes now it like moved it so that it's more positioned at the top right i can do the same thing here bottom center see how it moves now let's say i'm on my one phone here well i got to add it back in because i removed it let's say you know i don't i don't want to be looking right here i want to i want to see these boats on the side so here you could say um center right see that and again i'm on phone when i go back to desktop it's it's on bottom center or center whatever right again phone the position is different that's my point here consider adjusting the position of the background image on your different devices to make it responsive the next thing is the the fit you know the image size now i have some points here about the image size almost always i think it would be on cover so there's cover fit and actual size so watch if i change it to fit you get the idea that image is is gonna resize remember it's background image size that image will resize to it so that it fits fit right and and think about cover it's going to cover the entire area that it's in so it's in this section it's going to resize however it it can to cover that section that makes sense so it's actually going to be cropped a little bit um and you you've noticed that like when i when i change this padding here right it's cropping it it's not fitting all right so when i go back here let's change it to gotta click on the image no wrong thing let's change it to actual size see there it's going to depend on the actual pixel dimensions width and height that i uploaded let's get back to fit and see what it's doing it's it's trying to fit in here and it is it resized but it's like well now there's this blank spot around the sides all right so more than likely i think you would have it you know always uh cover but hey maybe you want to add some some pink behind it you know what i mean maybe you really don't want it to be cropped so you choose something different that option is available now i have some um yeah i have like my take on what these mean just an explanation but anyways there's some a few other things we're going to go over the text size i mean i hope that's obvious uh let's put this back to cover that's probably where we would have it this text right here you know when i go on when i move the phone here look how big this is this whole thing is ridiculous i can't read it and of course remember you can change it to the change the color but even something i mean you should always be doing this so my h1 here of course you know changing your your font sizes right so on phone you know i'm going to want this a lot smaller than on desktop all right yeah i may want it to be white or something and don't forget well that's that i'll get back to that but um that's the text size but also like even sizing so watch this if i say nine now i'm on the wrong thing sorry if i go back to this row the row is always eighty percent i may actually want that to be ninety percent on phone it takes up a little extra space the text will not be quite so cramped in there and you can get away with 90 a lot of times on there so maybe on um desktop i only want my text to be you know 60 wide right whatever um again this is the row itself but you're making the row wider therefore the text is flowing out wider that'll be another thing and along with that would be spacing remember how i adjusted the oh that was in this section the this here i just you know drug the padding in there well that was really bad idea because now when i'm on the phone you know now it's like it's it's wrong right so watch this see even just that made a huge difference right like that um yeah i probably wouldn't want it quite that small but you get the point those are things to keep in mind sizing spacing text size um and that's it that's all i have that's my tips another thing just to keep in mind of course if you're not familiar with this if you have your image set right this is going to be a tip the background image blend this isn't about responsiveness necessarily if i say overlay that's going to take this collar right here so i have this collar and watch what happens when i make it like semi-transparent right so i took the image made it change the blend the overlay and then it's putting that in there now i could have put a gradient in there see that isn't that cool but yeah basically you can do all that stuff and then when you go back to your other tab it's not there so whatever that is kind of related to responsiveness if you need to change even how the text reads on on a different device that's all we have if i've missed anything let me know um i probably have this is kind of one of those tutorials i wanted to do for a long time and i was too lazy to do it but but i see the question like how to make my hero section responsive and people are fighting it they want the image to somehow magically i don't know not change size on phone and it's just not logical it can't it would be small and then it would be like fit you could put it on fit anyway if you found that at all useful give me a thumbs up that really helps the algorithm when people are searching here um yeah you know the drill be subscribed i do tutorials every single week uh every tuesday here on our channel related to divi almost always a couple times it was just like more wordpress related but yeah related to divi and um yeah i hope you guys enjoy this we'll see you all in our next video [Music] you

Channel: Pee-Aye Creative

Views: 673

Keywords: Divi background image, Divi responsive background image, Divi responsive images, Divi responsive background hero section, Divi responsive background image on mobile, how to make Divi image responsive, how to make Divi background image responsive, Divi background images, Divi background image desktop tablet phone, Divi responsive tutorial Pee-Aye Creative, Nelson Miller tutorial, Divi tutorials Pee-Aye Creative

Id: GBJhkAhGKjE

Length: 16min 10sec (970 seconds)

Published: Tue Dec 07 2021