Static front page, want the image across the top to be the full width

I am setting up a website and I want the very front page to have an image that spans the full width of the browser window, but it is a static page and isn’t using posts to populate a slider. I have uploaded a HUGE image to the featured image option when I created the page, but it still resizes it so that it doesn’t fill the full page.

Here is the site I am working on:

This is what I want the images to look like (but without having to make blog posts since my site has a static front page):

Any tips on how to make this happen? I have searched and searched and haven’t found a solution that works.

Hi @cgreer00,

I hope you are well today and thank you for your question.

To achieve this instead of setting featured image please try adding large image in the content of your static front page.

Best Regards,

Thank you for the suggestion, but that doesn’t work either. This is what it looks like when I add a 1900 pixel wide image directly to the content of the page:

As you can see it gets resized and isn’t even as wide as the post itself.

Basically, I want it to look just like a slider image but on a static page. Very wide, not very tall (it is ok if it gets cropped), and it fills the browser window without any margins on the left/right.

Yes i can help you to achieve this developing custom CSS code but the following image you have added is not large size 1900px but smaller size 1024px

Then it must be resizing it when I actually insert it. See my screenshot below:

The theme doesn’t resize any image if you directly insert it in to content of post or page.

When inserting an image please make sure you have selected its full size as shown in the attached screenshots.

Thank you, it is there now as full size. Do you know how I can now crop it and make it the width so there are no white margins on either side?

hey there

  1. Please add this CSS in appearance - customize - additional CSS
.home .container.main-content-area {
    width: 100%;
    padding: 0px;
    margin: 0px;
  1. you will have giant image on the page and you should resize it, 1980*1080 or something like this,

Colorlib Support Team

Excellent, thank you! Now is there a way for my text below to not also fill the full screen? I want it to have margins so it isn’t to the very edge of the browser.

Now is there a way for my text below to not also fill the full screen? I want it to have margins so it isn’t to the very edge of the browser.

Please use below CSS code to achieve this.

.home .entry-content > p:first-child {
        width: 100%;
.home .entry-content > * {
        width: 70%;
        padding: 0 !important;
        margin: 15px auto;

Excellent, that is perfect! Much appreciated. One last question, if I want a full width image across the top of every static page on my website, but preserve the font margins below, how would I do that?

To achieve that just replace .home with .page in the above shared CSS code.

Thank you so much for all of your help!!

You are most welcome here :slight_smile:

Hello, that didn’t quite work. Here is an example:

Nevermind I got it to work! Thank you again :slight_smile:

Hi, there

Nice, to hear your problem is fixed:) Now I will now close the topic and mark it as resolved.
Feel free to contact us again Thanks!