Fitting Blue Image

I have added a Blue Image behind my email form but it is not fully stretching across the page. Can anyone please tell me how to fix this so it stretches fully across the page where the email form is located…
https://www.westside-shutters.com.au/

You need to remove the “no-repeat” from the image.

Better still, don’t use an image for a solid colour, just use background-color.

2 Likes

Which image are you referring to? The country map?

:slight_smile:

Yes, I would prefer to use a background color. Can you please tell me the code so I can add that. Thankyou.

This should do it if you add to your style.css

.contact-title .row{
background:#63CDF1!important;
/* important needed because you have inline styles */
}

Note that you have the image applied in an inline style in the html for some reason so you really should remove the inline style and reference from the css file instead.

1 Like

Thankyou, I removed the no-repeat and it worked. Thankyou. But could I please ask I need the Blue Image to go down so it touches the Top of the Footer image. How can I do that?

You said you wanted a background-color instead which is the code I gave above :slight_smile:

You’d need to remove the margin and padding on various elements as the element with the blue background does not touch the footer because some parents have padding and margins that would stop this happening.

You would need to do this but of course adjust the bottom padding to suit.

#contact .contact-title {margin-bottom:0;}
#contact  .contact-title .row{
padding:20px 0px 50px;
background:#addfff!important;
/* important needed because you have inline styles */
}
section#contact{padding-bottom:0;}

It will then look like this:

2 Likes

Your main div is not fluid. You need to put your form in a separate div and use a class=“container-fluid” on it. this will make your container stretchable to the edges.

1 Like

also use the old bootstrap 3

Yes if the blue container needs to go edge to edge then the html does need to be changed as you suggested. However there is an alternative trick that doesn’t require changing the html at all and for a solid colour box-shadow can be used to get the wide band of colour (an image can’t be used in this case).

e.g.

#contact  .contact-title .row {
/* 1170px matches the max-width of the element - it can't be bigger than the element or the shadow moves away */
  box-shadow: 1170px 0px 0px #addfff, -1170px 0px 0px #addfff;
}

2 Likes

:+1:

1 Like