# Background image

**URL:** <https://community.sitejet.io/t/background-image/3882>\
**Category:** Website Builder\
**Created:** [October 25, 2024, 7:49pm UTC](https://community.sitejet.io/t/background-image/3882 "2024-10-25T19:49:30Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Johnnsaad](https://avatars.discourse-cdn.com/v4/letter/j/7feea3/32.png) [@Johnnsaad](https://community.sitejet.io/u/Johnnsaad)\
**Post date:** [October 25, 2024, 7:49pm UTC](https://community.sitejet.io/t/background-image/3882/1 "2024-10-25T19:49:30Z")

</div>

I am new to sitejet. I made a website: [sitejet.tgscorp.com](http://sitejet.tgscorp.com) . When I view in desktop mode the background image is the way I like it. When I view in phone mode the background image is compressed towards the top and not occupying the background. I am not sure how to fix this for this ‘viewport’.

---

<div class="post-metadata">

**Author:** ![Richard\_Honey](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/richard_honey/32/2905_2.png) [@Richard\_Honey](https://community.sitejet.io/u/Richard_Honey)\
**Post date:** [October 26, 2024, 1:22pm UTC](https://community.sitejet.io/t/background-image/3882/2 "2024-10-26T13:22:23Z")

</div>

Hi @Johnnsaad  
Welcome! 👋

@Andre, I’d love to help John here, but I have no idea what to look for in Chrome’s inspect tool.  
Could you maybe guide us a bit?

John, hang in there. It’s Saturday, so someone will probably get back to you on Monday.  
💪

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [October 28, 2024, 11:39am UTC](https://community.sitejet.io/t/background-image/3882/3 "2024-10-28T11:39:07Z")

</div>

Hey there,

Would you be able to go into the Website Builder and copy the six-digit number in the URL here? That is the Website ID. Need to check what setting is causing this.

@Richard_Honey will post the solution here. I reckon this is not that easy withough going into the Builder 🙂

---

<div class="post-metadata">

**Author:** ![John\_Tgsinc](https://avatars.discourse-cdn.com/v4/letter/j/a9a28c/32.png) [@John\_Tgsinc](https://community.sitejet.io/u/John_Tgsinc)\
**Post date:** [October 28, 2024, 2:08pm UTC](https://community.sitejet.io/t/background-image/3882/4 "2024-10-28T14:08:41Z")

</div>

579392 is the 6 digit number

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [October 29, 2024, 2:22pm UTC](https://community.sitejet.io/t/background-image/3882/5 "2024-10-29T14:22:30Z")

</div>

Hey there,

so first of all I removed the lazyload from the picture on desktop.

Then, I found this custom css that is disrupting the image:

```auto
/*homepage extra styling*/
.preset-banner-v3-tech-startup-homepage {
	/*End honycomb pattern background images*/
	.banner-content .background-image-holder {
		//background-position: center -250px !important;
		@media screen and(max-width: $breakpoint-md) {
			background-position: 150% -200px !important;
			background-size: 500px auto !important;
		}
	
		@media screen and(max-width: $breakpoint-sm) {
			background-position: center -250px !important;
			background-size: 395px auto !important;
		}
	}
}

/*about page extra styling*/
.preset-banner-v3-tech-startup-about-page {
	.background-image-holder {
		background-size: 50vw auto !important;
	
		@media screen and(max-width: $breakpoint-xs) {
			background-size: 90vw auto !important;
		}
	}
}

```

It seems, that it comes from the template. We will adjust it soon - and I have changed the code for you on your site.

---

<div class="post-metadata">

**Author:** ![John\_Tgsinc](https://avatars.discourse-cdn.com/v4/letter/j/a9a28c/32.png) [@John\_Tgsinc](https://community.sitejet.io/u/John_Tgsinc)\
**Post date:** [October 29, 2024, 8:04pm UTC](https://community.sitejet.io/t/background-image/3882/6 "2024-10-29T20:04:02Z")

</div>

ok. you can change my website?

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [October 30, 2024, 7:46am UTC](https://community.sitejet.io/t/background-image/3882/7 "2024-10-30T07:46:19Z")

</div>

Hey John,

Yes, we adjusted the code on your website.

---

<div class="post-metadata">

**Author:** ![John\_Tgsinc](https://avatars.discourse-cdn.com/v4/letter/j/a9a28c/32.png) [@John\_Tgsinc](https://community.sitejet.io/u/John_Tgsinc)\
**Post date:** [October 30, 2024, 1:49pm UTC](https://community.sitejet.io/t/background-image/3882/8 "2024-10-30T13:49:58Z")

</div>

ok, thank you for that. I think it looks great. Lots to learn!

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [October 31, 2024, 9:29am UTC](https://community.sitejet.io/t/background-image/3882/9 "2024-10-31T09:29:11Z")

</div>

Keep your questions coming 🙂 That’s what we are here for.

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [October 31, 2024, 9:35am UTC](https://community.sitejet.io/t/background-image/3882/10 "2024-10-31T09:35:15Z")

</div>