fixing height and width on background image

[MariS]

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!

[Jsum]

@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?

[MariS]

Hi @Jsum

You can preview here. 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. 

[Jsum · Accepted solution]

@MariS,

Ah, sorry I found the image. 

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

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.

[MariS]

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