Fitting Blue Image

[brandon47]

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/

[TechnoBear]

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.

[Gandalf]

Which image are you referring to? The country map?

[PaulOB]

@Gandalf

Which image are you referring to?

@brandon47

where the email form is located…

[brandon47]

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

[PaulOB]

@brandon47

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.

[brandon47]

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?

[PaulOB]

@brandon47

Thankyou, I removed the no-repeat and it worked.

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

@brandon47

. 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’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:

[mqasimdigital]

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.

[mqasimdigital]

also use the old bootstrap 3

[PaulOB]

@mqasimdigital

this will make your container stretchable to the edges.

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;
}

[mqasimdigital]

@PaulOB

box-shadow: 1170px 0px 0px #addfff, -1170px 0px 0px #addfff;