# fixing height and width on background image

**URL:** <https://community.hubspot.com/t/fixing-height-and-width-on-background-image/3021>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [August 14, 2017, 11:30am UTC](https://community.hubspot.com/t/fixing-height-and-width-on-background-image/3021 "2017-08-14T11:30:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![MariS](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/maris/32/43030_2.png) [@MariS](https://community.hubspot.com/u/MariS)\
**Post date:** [August 14, 2017, 11:30am UTC](https://community.hubspot.com/t/fixing-height-and-width-on-background-image/3021/1 "2017-08-14T11:30:02Z")

</div>

HI everyone

I have followed instructions use a background header image and then apply text over it. Worked great. My problem is that I cannot edit the height of the background image, it is resizing itself based on the text element on top of it.

How can I adjust and fix the height of the background image, and at the same time center-align the text that appears over it?

Thanks!

---

<div class="post-metadata">

**Author:** ![Jsum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jsum/32/20405_2.png) [@Jsum](https://community.hubspot.com/u/Jsum)\
**Post date:** [August 14, 2017, 12:31pm UTC](https://community.hubspot.com/t/fixing-height-and-width-on-background-image/3021/2 "2017-08-14T12:31:27Z")

</div>

@MariS,

There could be several reason why this is happening. Could you share a preview link to the page so that I can have a look?

---

<div class="post-metadata">

**Author:** ![MariS](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/maris/32/43030_2.png) [@MariS](https://community.hubspot.com/u/MariS)\
**Post date:** [August 14, 2017, 1:02pm UTC](https://community.hubspot.com/t/fixing-height-and-width-on-background-image/3021/3 "2017-08-14T13:02:13Z")

</div>

Hi @Jsum

You can preview [here](https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=2920131&tc_deviceCategory=desktop&template_layout_id=5295745918). It’s in relation to the blue blox around the headline (it’s actually supposed to be a full image of a mailbox and flying envelopes).

I don’t necessarily want the template to adjust to the image, but I’d like to “fix” the background image size and then center the text over it. Currently the width of the image is fixed, but not the height.

---

<div class="post-metadata">

**Author:** ![Jsum](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jsum/32/20405_2.png) [@Jsum](https://community.hubspot.com/u/Jsum)\
**Post date:** [August 14, 2017, 2:12pm UTC](https://community.hubspot.com/t/fixing-height-and-width-on-background-image/3021/4 "2017-08-14T14:12:10Z")

</div>

@MariS,

Ah, sorry I found the image.

When ever I am applying a background image I typically use this css:

```auto
element {
 background: url(image.jpg);
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover (or 100% auto);
}

```

the difference between cover and 100% auto is that cover will sizes the image to cover all edges of the container whether by height or width while 100% auto stands for 100% width and auto height so it will always be 100% of the width of the container while the height with stay porportional.

I applied this to your css and it worked. try it.

---

<div class="post-metadata">

**Author:** ![MariS](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/maris/32/43030_2.png) [@MariS](https://community.hubspot.com/u/MariS)\
**Post date:** [August 14, 2017, 3:14pm UTC](https://community.hubspot.com/t/fixing-height-and-width-on-background-image/3021/5 "2017-08-14T15:14:35Z")

</div>

@Jsum You are a legend! Have an epic day, thanks for making mine!