[PG]

Hi Mahesh,

I use the below css code you suggested and it helps with the issue I had a month ago. Could you please also advise the css so that the picture responses on a mobile as at present the name MATT is cut off on the left and right. Website is now online: http://mattfurniture.co.uk/

Many Thanks
Petra

#promotion-message .section {
background-image: url(“http://mattfurniture.co.uk/wp-content/uploads/2016/02/matt-furniture-logo-rex.png”) !important;
background-position: center center;
background-repeat: no-repeat !important;
background-size: cover;
}

[Mahesh]

Hi @pg,

For responsive image, you’ll need modify background-size property in the above code. Change the code background-size : cover to background-size: contain so it would look like following:

#promotion-message .section {
	background-image   : url("http://mattfurniture.co.uk/wp-content/uploads/2016/02/matt-furniture-logo-rex.png")  !important;
	background-position: center center;
	background-repeat  : no-repeat !important;
	background-size    : contain;
}

With this change, the background image will be a bit smaller than what it is now, and it will be responsive.

Regards,
Mahesh

[Author]

Posts