Make Your Background Images Look More Professional in 4 Simple Steps

This one element can make your homepage or landing page look very professional or really amateurish...

The problematic element? Your background image.

After looking at hundreds of homepages and landing pages we keep seeing the same issues over and over again.

These issues hurt your conversions and your brand.

The good news is that you can fix them in 4 simple steps!

Discover how to:

  • Pick the right image from our favorite free stock photo resources
  • Optimize the image for faster loading
  • Make the image suitable as a background image without using any photo editing tools
  • Make your mobile readers happy too

Ready? Let's get started!

More...

The Most Common Problems With Background Images

There are two obvious and two less conspicuous problems with background images.

The Obvious: Speed and Readability.

We noticed that many background images took a long time to load. This happens when the image is too big or not optimized for the web. This is annoying for visitors, but is also a negative factor for SEO.

The second and even bigger problem is readability. Unfortunately, some images just don’t play nice with text overlays which can make your actual homepage message impossible to read.

The title of your homepage or landing page is the most important element of that page. It's what gets visitors to stick around and read on. If that title is hard to read because it doesn't overlay well on your background image, chances are that new visitors will bounce rather than squinting to figure out what your website is trying to offer.

The Less Obvious: ​Brand Image and Clarity

Not every business can afford to have custom images taken by a good photographer. Luckily, there are a lot of websites that offer free, natural looking stock images. But this also means that everybody has access to the same photos.

Using the exact same stock image as your competition can hurt your brand image and make you blend in rather than stand out from the crowd.

I talked about this in depth in the article "How to Use Free Stock Photos on Your Website Without Hurting Your Conversions".

The choice of your image also plays a big role in the clarity of your message.

Because of the growing trend in full screen background images, we’ve seen businesses use them even though the actual image has nothing to do with the product or service they provide.

You shouldn't use an image just for the sake of having an image...

If you can not find a photo that’s closely related to your business, ask yourself if using an image is the best choice here. You can make a good looking design using colors, gradients and patterns rather than images. That's exactly what the websites below are doing.

Examples of websites that use colors, gradients and patterns rather than images for backgrounds.

Having an unrelated image is bad for clarity, but so is counting on the image to do all the talking.

If the image is necessary to understand what the website is about, you will have a big problem with SEO.

Search engines can only read code. They can not “see” images. An image like the one below will never help the site rank for anything fitness related.

Don't count on your image to do all the talking...

The only thing Google can read on this image is "Become a Better You".

Although you can add attributes to your images to help search engines understand what the image is about, it will never be as visual for your “human” visitors or have the same impact on your rankings as words in a big homepage headline will.

Now that we’ve covered the 4 problems with background images, let’s see how you can avoid making the same mistakes. 

Follow the next 4 steps and you'll never have these problems again on your site.

Step 1: What Photo Should You Choose as Your Background Image?

First question: What image will help you communicate your core message?

Brainstorm a bunch of words you would like to have pop up in the visitor's mind when landing on your website.

Now, go to a free stock images sites such as pixabay, Stocksnap.io or Pexels and put the words in the search engine to see what comes up.

Of course if you have original, high quality photos, that’s even better.

Look for an image with uniform colors. A text overlay on an image with very dark and very light areas will always be harder to read than a more uniform image.

Images with uniform colors are more suited as background images.

Download the photos you like in a resolution that's at least 1920 px wide.

Step 2: The Need For Speed

Now that you have your image in the right dimensions (1920 px), it’s time to optimize it for the web.

This sounds complicated but is actually super simple!

Go to Kraken.io, pick the "free web interface" and upload your image.

The data size of your image is instantly reduced without any visible loss in quality!

If you're using a Thrive Theme, you can use the built-in image optimize function so you don't need to use Kraken at all. You can see how to use this cool feature here.

Step 3: Improve the Readability of Your Text Overlays

Now there is one simple trick to making any image instantly more suitable for a text overlay.

What this simple trick?

Adding a color overlay on top of your background image.

With Thrive Architect, this is really easy. You won't need a separate photo edition tool!

  • Add a background section to your page and make that section full width (4.46 min)
  • In the "Background Style" menu add first a solid color (this will allow your text overlay to be readable even when your photo is still loading). (5.02 min)
  • Then add a second background layer. This time choose the image overlay and insert your background image. Make sure the dimensions are set to "full width". (6.15 min)
  • Now, add a third background layer. This time add a color overlay but reduce the opacity to make the photo visible again. Typically, adding a white (#ffffff) or black (#000000) overlay works best. (8.18 min)
  • That's it!

If you want to go fancy, you could add a gradient overlay instead of a solid color on top of the image.

And if you're looking to use a photo of yourself then you suggest checking out this tutorial: Create a Pro Looking Hero Image Header

Step 4: Make Your Mobile Visitors Happy

These type of big background images look amazing on desktop. But what about mobile?

The very first question is, do you want this image to show on mobile? Maybe you can just simply use a colored or gradient background.

In that case, go to the mobile view and delete the background image.

If you want to keep the background image, make sure to:

  • Reduce the text size of the title (9.28 min)
  • Decide where you want the image to be scaled from. This will have an impact on which part of the image is shown. (9.39 min)
  • Reduce the background section height. (10.30 min)

Background Image Checklist

  • Choose a photo with uniform colors from Pixabay, Stocksnap or Pexels.
  • Download it at 1920 px width.
  • Reduce the weight of the image with Kraken.
  • On your site, add a background section and set it to "Stretch to fit screen width".
  • Add a solid color as the first background layer (dark color if light text, light color if dark text).
  • Add background image at full size as the second layer.
  • Add white or black overlay and set opacity at less than 100% so that the photo shows as the third layer.
  • Check and optimize mobile view by either removing the image or switching the anchor point.

It's Your Turn Now

Were you accidentally making one of the mistakes described above?

If so, were you able to use the simple tricks we showed to fix it? Let us know how you managed in the comments below!

Author: Hanne Vervaeck

Hanne knows exactly what companies have ever retargeted her (she keeps an updated file). And when she's not busy discussing high-level funnel design over cocktails with the equally geeky, you'll find her discovering a place for the first time

  • Great blog post!

    Makes it more likely that I will take the plunge and actually add an image to my homepage…
    :-)

    Thanks!

    • Hanne says:

      Hi Trevor,

      Only when needed remember ;-)

  • Sam says:

    I’m a big fan of direct response and Ogilvy – he was a fan of just using plain white background and not being fancy.

    And while the rest of the people try and make everything “look good,” I guess there’s an inherent differentiator in keeping things plain and simple? :)

    • Hanne says:

      Plain and simple works… as long as your website doesn’t look like it was made when Ogilvy was still alive ;-)

      I think it’s important to give a pro looking feel to a website. This can off course be done without images! But just plain white might be taking it a bit too far :)

  • Thank you so much for this.

    • Hanne says:

      You’re welcome Johan

  • Ray Akers says:

    Great tutorial! I had a problem with my background image slowing down my site speed. I didn’t know about Kraken, I’ll be sure to use them in the future!

    • Hanne says:

      Hi Ray,

      Yes Kraken combined with uploading the image in the right size is golden for speeding up your website!

  • David Parker says:

    Very useful. Thank you. Always been baffled with images

  • Sherwood Tucker says:

    How do you discover who is retargeting you?

    • Hanne says:

      Hi Sherwood,

      I just pay attention to the different ads I see :) While most people ignore ads, I pay special attention to them and will mostly be using the web without adblocker ;-)

  • Anna Krueger says:

    I’m using Thrive Themes and I think I have followed your advice accurately for my homepage image and branding. What do you think Hanne? https://neuroplan.ca

    • Hanne says:

      Hi Anna,

      Looking good :) I would darken the image a little more so that the white text is really what catches the eye (rather than the colors in the image).

  • Joe says:

    I’m missing something. You mentioned, I think, not to use the picture w/ the text overlay created with the tools demoed in the video because google can’t read it and therefore it’s not good for SEO.

    Question: How would the text be added once uploaded to the website such that it would readable for search engines and thus favorable for SEO purposes?

    • Hanne says:

      Hi Joe,

      We’re talking about background images here so you would upload the image to a section on your website, as the background image and then you can simply use text elements on that image (as if it was a plain background).

      This way the text is actually in the code of the website (in the HTML) and it can be read by search engines.

      You can see an example of this in the homepage from scratch video.

      • Al Simon says:

        Hey I don’t think the link above is working – not showing anything for me anyways

      • Hanne says:

        Fixed the link; sorry for that

  • Roxanne says:

    Thanks Hanne! As always, your posts are tres helpful and you rock.

    • Hanne says:

      Thanks Roxanne. You rock too :)

  • Barbara says:

    You may want to exchange bear for bare in your second paragraph.

    • Hanne says:

      Thanks for spotting that typo Barbara.

  • George Megas says:

    So helpful,thank you guys!

    • Hanne says:

      You’re welcome George

  • Helen M says:

    Excellent tutorial, Hanne, and so timely for me. I’m busy updating my home page after your excellent 5-day challenge last week, and I was wondering how to get a professional-looking ‘muted’ image that didn’t overwhelm the title and intro text. Thank you so much. Now I can continue with my upgrade!

    • Hanne says:

      Hi Helen,

      So happy to hear this came at the perfect time for you and good luck with the homepage update!

  • Lee Whistler says:

    I love bright people who communicate well. They are my teachers and my inspiration to do things well. Sweet!

  • Latrice F says:

    Thanks Hanne that was a very helpful tutorial!

    • Hanne says:

      You’re very welcome Latrice

  • Daniel says:

    Gracias por el tutorial

  • Thanks so much for great article and Video. Must have :)

  • Elizabeth R says:

    Thanks so much for this information. I was having a problem with my background pictures last night. I will redo the images on my Homepage and about page. Thanks again, I will be making some improvement on each page.

    • Hanne says:

      So happy to hear that Elizabeth. You’ll see this will improve your homepage and about page quite a lot :)

  • SHERALEE O says:

    Thanks Hanne, great tutorial. You talked about not adding the words to the image, but putting them on the website instead (for SEO reasons??). Could you explain or demonstrate how to do that please.

    • Hanne says:

      Hi Sheralee,

      Like I briefly explained, Google can not see what is written on an image. So text on an image just doesn’t exist for search engines. You need to have the text actually written on your page so that it shows up in your html code.

      To do so, you can upload the image as a background image (without text) and then add a text element over it.

      You can see how it’s done in this tutorial.

  • Brian says:

    Thanks Hanna, this is very helpful!

  • Steve says:

    Thank you for this tutorial. I enjoyed it.

  • Al Davis says:

    Really useful video–lots of new and helpful stuff. General comment: making the videos at the speed of the user, rather than your own speed, would make this new material easier to assimilate, and obviate the need to replay the things a bunch of times. Thanks!

    • Hanne says:

      Hi Al,

      Sorry if I was going too fast in the video. I’m very used to using PicMonkey so this is me slowing it down a bit :) But I’ll try to pace myself even more next time around.

  • Ralph says:

    Great, Hanne, real value, quick and clear. thanks, Ralph

  • James says:

    Hanne, very helpful post.

  • Jeff says:

    Thank you for another great instruction video!

  • Una Doyle says:

    Great article, thanks Hanne. Question please, what is the best way to have a photo of yourself as the background image that will also work for mobile?

    I had some professional photos taken and could either use one that is me with a nice green view behind me (grass and trees) or a cut out of me on a coloured background.

    I have my arms outstretched to welcome people, with the idea that I’m on the left hand side of the page and the headline is on the right where my left hand is directing the viewer. (This isn’t yet on my homepage as I’ve been doing the Better Home Page challenge and got stuck with this.)

    What I’m not sure of is on mobile won’t I disappear?

    This is why I wondered if it would be better to have a plain colour background and then add the cut out of me as an image in a content container? So that would adjust for mobile?

    What do you think is the best approach please? Thanks Una

    • Hanne says:

      Hi Una,

      Yes this is a tricky one for mobile.
      What I suggest is to have a background image (like the one with the trees and the grass) and have yourself cut out.
      Use a column layout to put “you” on the left side in the section and the text on the right side.
      This way on mobile, the image will stack with the text and the background image will scale.
      So the trees and the grass would scale (which is not a problem because it’s purely background) and you would either have your photo first and the text underneath it or if you choose the reverse column order, you can have the text first and you underneath it.

  • Harvey S says:

    Thank you Hanne.

    Just to be clear though, if we are using Thrive Themes, the theme will automatically optimize the image like Kracken, right? So we don’t need to do that ourselves do we?
    Thanks – Harvey

    • Hanne says:

      Hi Harvey,

      If you made sure to activate the option in your theme options (as explained here), yes :)

      • Harvey S says:

        Of course!
        Thanks again!

  • Rexx says:

    Great, informative video Hanne!

    One question, can you please elaborate on your statement about NOT wanting to add/save text on your image while in PicMonkey, but instead adding the text later (once on the website, I believe)?

    Is there a link or video that explains more about that and why?

    Thanks!

    • Hanne says:

      Hi Rexx,

      The reason for this is that Google (and other search engines) can not read what is on an image. So for them, the text on the image just does not exist.

      That’s why for SEO reasons you should never include text on images if you want that text to help you rank.

      If you want to learn more about basic SEO, you can take our free Thrive University Course SEO if you don’t want to learn SEO

  • Bowen says:

    That was a really helpful tutorial Hanne, thank you for taking the time to put it together!

    • Hanne says:

      You’re welcome Bowen, glad this helped you!

  • Pierre L says:

    This was very insightful. A lot of the benefit is psychological as well. These are great tips and suggestions. I am certain you could write a mini-book about the benefits and different kinds of backgrounds for different purposes.

    • Hanne says:

      Hi Pierre,

      That would be one ebook I would love to read for sure :)

  • Joan Bell says:

    Thank you Hanne, I don’t actually use an image on my Home page but loved this tutorial nonetheless. And thank you for those links, a couple of them are new to me.

    • Hanne says:

      Hi Joan,

      Happy to hear that. Now you’ll know what to do if you ever would like to use a background image :)

  • Robert H says:

    This landing page post is Gold, Hanne . I was aware of overlays and knew these image aides were generated in Photoshop Not being an expert in that very deep program it was an issue. I’m was aware of Pic Monkey, but I had never married the two. Thank you, Thank you, Thank you. This whole post will make my life so much easier.

    I have said this before, but it’s worth repeating. I love hearing your accent Hanne. It’s a refreshing change from the ubiquitous American drawl. There is no offence intended to my very excellent American friends some of whom I love dearly. They have exported the culture amazingly, almost to a fault LOL But not only do you speak English as a second language, but you speak it very well Hanne

    For me, I only have one language, and it is an arrogance on my part not to have two languages, something I am about to address by travelling to China and emerging myself in the Language.

    • Hanne says:

      Hi Robert,

      I’m very happy to hear that this tutorial saved the “not a Photoshop expert” problem for you.
      And I’m very grateful growing up in a small country with a language that almost no one understands which forced me to learn several others :)

  • Peter says:

    Brilliant tutorial-many thanks

    • Hanne says:

      You’re welcome Peter :)

  • Shaun G says:

    Hi Hanne,

    Great post. Super easy to follow.

    Is it possible to choose which portion of the image will be displayed when using the background image in a page section? It seems like my image is larger than the section I want to use it on, and it looks quite zoomed.

    I’m assuming a workaround would be to find out the height of the page section and crop the image to that height.

    Who do you suggest?

    http://thelovedrive.wpstagecoach.com/

    The image is in the testimonials section and looks quite zoomed from what I uploaded.

    • Hanne says:

      Hi Shaun,

      You can not really choose which portion to show, but you can thick the box “full height image” this will automatically expand the section to the height of the image rather than stretching it out.

      Hope that helps :)

  • sylvia says:

    Great tutorial thank you

  • Hanne says:

    Hi Claudio,

    This was done with custom CSS in the landing page template.
    It’s not (yet) a possibility in TCB.
    This is something we’re counting on adding in the new TCB 2.0.

  • Hanne says:

    Hi Lisa,

    Once you uploaded the background image, you can use one of the text elements in Thrive Content Builder to add text.

    You can see an example of how it’s done here in the homepage from scratch video.

  • Hanne says:

    Hi Alex,

    Working on it for the new TCB 2.0 :)

  • Timothy says:

    Great turorial ! Kudos

  • Marion says:

    Thank you for this great tutorial. Don’t Thrive themes optimize images automatically?

    • Hanne says:

      Hi Marion,

      Like I explained in the post, yes if you use a Thrive Theme on your site you have the option to optimize images automatically :)

  • Crystal says:

    I’m still new to all of this. Thrive Themes has been a great help! I think I am good with the design I have chosen; however, it is still fun to read and learn new knowledge.

    Thank you so much for sharing!

    • Hanne says:

      Hi Crystal,

      Good thing your design was already on point :)

  • jonathan says:

    Hi Hanne….i have been to Pexel and downlaoded images as a 1920 pixel size…. then added an ovelay in picmokey….then uplaoed to my website through TCB….but when it is on website (clone of my home page) the picture is really grainy and pixelated…..even though i have the optimisation of Lossy on my site…
    can you help?

    • Hanne says:

      Hmm Jonathan,

      Without seeing the page it’s hard to tell… Seems like the image is stretched somehow.
      Can you click on “full height image” to see if that fixes the problem?

  • Joshua P says:

    Awesome, so helpful! Thank you!

  • Joshua P says:

    Question…

    Once I turn on the Kraken feature in my ‘Thrive Themes Dashboard’ will this image optimization be applied to all the picture I upload within my pages too?

    Thank you for your time :)

    • Hanne says:

      Hi Joshua,

      Yes to all uploaded images :)

  • Great Article!!!!!!!

  • Alice Varela says:

    Thanks for tip. I’ll use it on my sites

  • Welly Mulia says:

    Thanks for the tips and tutorial, Hanne!

    They’ve been very helpful! Will use them when creating our new homepage design to create a background image!

    • Hanne says:

      Glad to hear that Welly!

  • Juan G says:

    Thanks Hanna
    Text, images and backgrounds were an issue at the time to design webpages on my site, but now I figured out how to do it easier after I read your article. Thanks again! And you are right, my thrive theme optimizes my images by itself…..

  • David P says:

    Thank you for this. Super useful post!

  • huy2281997 says:

    Where can i find “backgrounf Image” in the new Thrive Architect?

    • Shane Melaugh says:

      Hello,

      Many elements (content boxes, background sections, buttons and more) have a “Background Style” option in the sidebar. There, you can add colors, images, patterns and gradients to the background.

  • Keith says:

    Does the Thrive Image Optimization tool retain EXIF meta data in edited images?

    • Shane Melaugh says:

      The exif data is stripped in the optimization process.

  • Tracy says:

    HI Hanne..thank you. What about dimensions for the various mobile sizes? I noticed Architect only has 3 but there are so many more options… like tablet horizontal and vertical as well as phone horizontal and vertical. Plus some screen are yet bigger than others. What should use as a standard so that my background image looks good with text on any or at least most of these screens?

    • Hanne says:

      Hi Tracy when your site looks good on this three sizes, it will most likely look good on the sizes in between. If you want to check, use F12 to get the inspection/developer tools and use the responsive view to check.

  • Benny Brogan says:

    Perfect teaching / presentation thanks.
    I’m building a new website right now, therefore I was interested.
    My old website is an html site built with Mobirise.

    • Hanne says:

      Don’t even know what that is :D Glad I could help Benny

  • Geoff A says:

    Thanks so much Hanna for the tutorial. Very helpful. :)

  • Robert says:

    Very well done…Thank You.

    • Hanne says:

      You’re welcome Robert

  • Franc K says:

    Fantastic video Hanne. I especially appreciate your mention of the hero tutorial. I checked it out, It is exactly what I needed.

    Thanks

  • Eduardo N says:

    Great, Hanne! Thank You Very Much! :)

  • Heather says:

    Very helpful! Thanks Hanne!

    • Hanne says:

      You’re welcome Heather

  • Manfred Peter L says:

    Very good video, all of your videos are very good! But the background images destroy my performance. in the moment i measure with different tools like gtmetrix and they tell me about 1,2 seconds for my homepage (it´s a LP) !! So all background images are removed, only small pictures are allowed on my sites. And of course with lazy loading too. Thanks for your engagement!

    • Hanne says:

      Hi Manfred,

      Yes you’ll always have better performance in speed without images. Although having an optimized image can already make a huuuge difference!

  • Marcia Jones says:

    Very helpful. Thank you :)

  • Michela says:

    That’s very cool. Loved these ideas. I’d like to see the hero image, can you please point me to the right page?

  • Nicole says:

    Thank you so much, Hanne! That was very helpful!

  • Karin says:

    Hi Hanne, I thought that Kraken was “in side” Thrive Themes as an automatic feature? did I misunderstand that?

    Fantastic video – thanks :)

    • Hanne says:

      Hi Karin,

      If you’re using a Thrive Theme, it is!

  • Dave says:

    great post! How do you go from full screen to circle when you’re on screen?

    • Hanne says:

      That’s our video editor’s magic touch ;-) You can learn how to do it in this tutorial.

  • Carl says:

    Thank you. Nice article.

  • Great content. The checklist at the end is very useful! Thanks.

  • Victor says:

    Unbelievable! You just saved me. This is right on time, Thanks!

    • Hanne says:

      Yey :) Happy to hear Victor!

  • Irene K. says:

    Thanks for the tips and tutorial, Hanne! Indeed very helpful!

  • Bob says:

    Hanne, thanks so much, this was great. I wasn’t even aware that I could adjust my site (and need to adjust my site) for mobile! I know that wasn’t the point of your lesson but more valuable for me :-)

  • patrick4 says:

    Hey there Hanne, another fab tutorial to start the day. Hanne, if on mobile view, one uses a smaller optimised image for mobile, will it be that the page is loading both elements or will this speed page loads? Second question. Can one click on the ‘image size’ view in ‘mobile’ and change it to a smaller size to load or does this type of change now affect all responsive view?

    • Hanne says:

      When you edit the image in mobile, it will only affect the mobile view. So if you delete the original and upload a smaller image, it will load that smaller image on mobile.

  • patrick4 says:

    One further quick question Hanne, do you have a tutorial that explains the difference between using a Thrive Theme vs Thrive Architect on a basic WP Theme? I noted your comment about being able to hide top elements within a Thrive Theme – just wondering specifically what other differences / advantages for Thrive Themes. Thank you so much :)

    • Hanne says:

      Hi Patrick,

      We have a few nice features that make our themes unique (but we’re also working on a completely new theme so things are about to change).

      • Balazs says:

        Can you tell us any update regarding the new theme? :)

      • Hanne says:

        All I can say is that we’re working REALLY hard on it :)

  • Margherita Pescollderungg says:

    WOW! Thank you!

    • Hanne says:

      You’re welcome Margherita

  • Peter C says:

    Hi Hanne
    Thanks for your video.
    You mention that for the mobile view it it is sometimes worth considering using a colour rather than an image as the background to a ensure fast-loading page on mobiles. Is it possible in Thrive Architect to load a different version of the image (eg only 500px wide) to load only on mobile views? – that way one can use the image (if that works in the mobile design) and have the benefit of a fast-loading page – as the image will be so much smaller in Kb size than the 1920 width image. Thanks Peter

    • Hanne says:

      Yes it is.

      Go to mobile view and delete the original image, then upload the smaller image and you’re good to go.

  • Bethany S says:

    Very helpful and easy to follow. Thank you!

    • Hanne says:

      You’re welcome Bethany

  • Jerry Burns says:

    Thrive Architect is awesome. I love this plugin! Thanks for the info.

  • Fred says:

    Fantastic video and a great help. I’m curious what presentation software you’re using to make your videos.

    • Hanne says:

      I film with an EOS 650 reflex camera and screencast with Camtasia. Then our video editor does all the magic to get the bubble effect. If you want to try this yourself, he made a tutorial on it here.

  • Lindsay K says:

    Thank you!!! I have been struggling with background images!

    • Hanne says:

      Happy I could help you out then, Lindsay!

  • Great as always! Loved the checklist; really useful.

    Thank you Hanne.

    • Hanne says:

      Thanks Luis

      • Hello Hanne,

        I have one final question on this matter.

        What happens if, after I pushed the image through Kraken.io to get the optimized version of it, I push it through the service once again? will this optimize it further? or is this something not recommended.

        Thanks.

        Luis

      • Hanne says:

        I think it shouldn’t change anymore… But haven’t tried it.

  • Keno says:

    Hey Hanne,

    thanks for the tutorial.

    I have 1 question concerning the background colour. Why did you choose a green bg colour first? Can the visitor see it through the bg picture?

    Thank you!

    • Hanne says:

      No not as long as the background image is full opacity.
      But like I explain in the video you want to pick a dark background color so that the white text is readable.
      I picked green purely for a design purpose :D Could have picked black.

  • Christopher B says:

    Fabulous article.

    • Hanne says:

      Happy you like it Christopher

  • Ken J says:

    Great tutorial. Very, very helpful. Thank you!

  • Jimmie Quick says:

    These are so so so helpful!

    • Hanne says:

      Happy you feel that way Jimmie!

  • Ahrale says:

    Thanks for another useful post.
    I use tinyjpg.com to reduce image weight, it usually reduce around 70% and keeps high quality look on web.

  • Matt Tomkin says:

    More great content, thanks for going into this. We need to update our header sections and has given me some food for thought!

  • Joe says:

    Hi Hanne, Thanks again for an easy to follow tutorial! I’m finding that I’m looking forward to every email from Thrive Themes as each lesson helps me to improve my abilities with this amazing tool set, cheers!

    • Hanne says:

      Yey :D Thanks Joe sounds like music to my ears!

  • Kirsty Carter says:

    Hi Hanne

    This is an excellent tutorial as usual. Thank you!

    One issue I consistently have is with the mobile and tablet images not showing well. They look terrible when I look at them on review and when I look at them on my iphone and ipad. I did everything you suggested here but still get a poor image.

    I resolve this problem by reloading the image and the second overlay in the tablet and mobile responsive views. They show up well on all devices except the ipad in landscape view.

    This is the only way I’ve been able to resolve this. I would like your thoughts on any issues you might forsee doing it this way. Also – why doesn’t it look good on the tablet landscape view?

    Thanks.

    Kirsty

    • Hanne says:

      Hi Kirsty that’s really weird…
      Are you sure you’re loading the right size image?
      If this keeps happening, I would take it up on the support forum cause it’s not supposed to do that!

  • Umberto says:

    Hi Hanne, great post!

    Just two questions:

    1)Should thrive members use the built-in kraken.io integration for better results?

    2)In thrive Architect if you modify an element in the desktop view is it modified for all views? Instead are all the modfications made in the mobile view applied only for the mobile representation of the site?

    • Hanne says:

      Hi Umberto,

      1) Yes if you’re using a Thrive Theme, you can use the image optimization that’s build in. No need to go via Kraken anymore :)

      2) That’s exact. Editing cascades down so desktop modification apply on desktop, tablet and mobile. Mobile edits only for the mobile view.

  • Erikk I says:

    What thrive theme are you using in the demo?

  • Ramesh says:

    Great tutorial, Hanne, very helpful. I will definately try these techniques, thank you

  • Amit Jain says:

    Nice & Interesting – I will a try again, Most of the time i have used it make a page a bit slower.

    • Hanne says:

      If you optimize your image it shouldn’t make much difference (but off course solid color will always win).

  • Kevin+J says:

    I was told that my Thrive Themes (Rise, Minus, etc) automatically compressed my media images with Kraken because the theme needed various different sizes and would generate the right ones. Is that still true, or do I have to compress my big images to 1920 as you say in your checklist? Thank you

    • Hanne says:

      That’s still the case if you have the “image optimization” option activated.

  • Nicolas R says:

    Hello, thanks for all the tips but one question. How can i have the normal header and menu (and also footer) when I’m using your way to create the page i didn’t find any option to get the normal header/menu and footer as if I use normal way to create a page. Thanks for your answer

    • Hanne says:

      Hi Nicolas,

      If you have a Thrive Themes theme installed, you can pick the “full width” page and start designing from there (rather than from a landing page) this will allow you to keep the footer and the header.

      • Nicolas R says:

        Mmmmhh… I do not understand. Because if I use the normal full width, i can’t add the gradiant to the picture or choose any option.

      • Hanne says:

        Hi Nicolas, you would not use the image of the theme. But add a background section and then add the image and the overlay…

  • Robyn A says:

    I don’t have the option to change where the image shrinks from. I wanted to know if I am missing something.

    • Hanne says:

      Hi Robyn, make sure your Thrive Architect is up to date. If you still don’t see the option, please open a ticket on our support forum. They’ll be able to help you out.

  • Carola says:

    Hi Hanne,

    I am using the Thrive Pressive Theme and Thrive Architect. Is there any way to change the Header Photo like you showed it in your video with Thrive Architect?
    I only found the possibility to change the image in the Titel section content, but I can’t edit it with Thrive Architect.

    Do you have any tip for me?

    • Hanne says:

      Hi Carola,
      The theme header is part of the theme (in this case pressive) and you won’t be able to change it with Thrive Architect.
      If you want full control, then you can start from a blank landing page (which overwrites the theme) and use only Thrive Architect.

      • CArola says:

        Thanks a lot, Hanne.

  • Mark N says:

    Hi Hanne,

    I’ve uploaded many different file sizes, but no matter what size I change my image to, when I upload it as a background, the quality is horrible. When I upload as a standard image, full length, it uploads high quality. I’m not sure what’s happening here.

    • Hanne says:

      Hi Mark,

      My guess would be that in the WordPress image gallery the size is set to something like medium rather than full width. When you insert the image, in the right sidebar (where you can add a title and alt tag etc.) in the WordPress gallery there is a drop down with the size. If that’s set to less than full size, your image will always be blurry. https://cl.ly/0g440o440v0W

  • Tom B says:

    Hey Hanne,

    I’m having trouble changing the background image in the templates. I’ve looked everywhere possible.

    • Hanne says:

      Hi Tom,

      What template are you talking about?
      Background images are usually in the background section or in a content box. Both can be changed from the background options.

  • >

    Join Thrive University (it's FREE!)