Docs

[bryan1976]

Hi,

Only using X for a few weeks and not a professional!

I am trying to place a background image that is responsive behind my footer widget area and flow into the bottom footer with copyright. I would like the logo to remain centered accross desktop and tablet screen sizes…not worried about Phones etc.

my URL is here: http://dev.theaudiobarn.co.uk

wordpress 4.4.2

X version 4.4.1

The effect I am trying to achieve is like the attachment.

Many thanks for your help!

Bryan

[Thai]

Hi Bryan,

Please update your custom CSS to this:

.x-colophon.top {
    background-image: url("http://dev.theaudiobarn.co.uk/wp-content/uploads/2016/03/audionotebackground3-1.png");
    background-size: cover !important;
    background-position: center center !important;
}

Hope it helps 🙂

[bryan1976]

Hi,

Thanks! That does help a lot….

2 things if you can:

1) Can the bottom footer where the copyright is, be transparent over the top of this image?

2) The image is restrained by the size of the footer widgets….can its height be left to run above the widgets?

Thanks,

Bryan

[Christopher]

Hi there,

#1 Please add this :

footer.x-colophon.bottom {
    padding: 0;
    background-color: transparent;
    margin-top: -37px;
    color: #fff;
    z-index: 2030;
    position: relative;
}

#2 Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Hope it helps.

[bryan1976]

Hi,

Thanks for your email….this is nearly there now.

Firstly there is a line between the footer and bottom footer as you can see on the live site….can this be removed?

OK please look at the attached image I wish to use as the background. Its 1400px x 426px however it doesn’t show full size on the live website…the height is cropped.

Is it possible to have the image show full height? Then have the footer and bottom footer over the top?

Many thanks,

Bryan

[Rupok]

Hi Bryan,

Thanks for updating. To remove the border, let’s add this CSS :

.x-colophon.top {
  border: none;
}

There is not enough content to display the full background image. You can try setting padding or min-height like below :

.x-colophon.top {
  min-height: 500px;
}

or

.x-colophon.top {
  padding: 150px 0;
}

That’s what I could suggest for your current setup.

Cheers!

[bryan1976]

This reply has been marked as private.

[Rue Nel]

Hello Bryan,

Please update the given code and use this instead:

footer.x-colophon.bottom {
    padding: 0;
    background-color: transparent;
    margin-top: -37px;
    color: #fff;
    z-index: 2030;
    position: relative;

    border: none;
}

Please let us know if the border has been removed or still there. Thank you.

[bryan1976]

Hello,

This is perfect! Thanks for your support – line is now removed and footer looks awesome.

1) Is there a way of changing the behaviour of the background image to be more responsive….

Basically this setup looks great on desktop and tablet, but the “Audio Note” logo in the centre is too large for smaller screens – it goes over the edge. It would be great if it could have the same relative aspect across all screen sizes even smartphones. See attached screenshot that the logo is too large for the screen of an iPhone.

2) Why is the telephone number in red, even though its white in the widget?

Thanks again for your help.

Bryan

[Friech]

Hi Bryan,

When the site is viewed on mobile, we need to switch the background image on a portrait oriented one with the custom CSS code below, that is because your current image is landscape and can’t be fitted to a portrait mobile view.

@media (max-width:  480px) {
	.x-colophon.top {
		background-image: url('PORTRAIT BACKGROUND IMAGE');
	}
}

Replace the PORTRAIT BACKGROUND IMAGE with the image URL.

#2 You can add this under Custom > CSS in the Customizer.

a[href^="tel"] { 
    color: white; 
}

Hope it helps, Cheers!

[bryan1976]

This reply has been marked as private.

[Christian]

This reply has been marked as private.

[bryan1976]

This reply has been marked as private.

[Rue Nel]

Hello Bryan,

Please also add this following code in the customizer, Appearance > Customize > Custom > CSS to make sure that the logo in the background image is small enough to be displayed on the page:

@media (max-width: 480px){  
  .x-colophon.top {
    background-size: auto 80%  !important
  }    
}

Hope this helps.

[bryan1976]

This reply has been marked as private.

[Author]

Posts