Docs

[islandmums]

Hi guys,

I am attempting to add a static image like a banner to my custom posts – using custom CSS… I think I am starting to learn CSS! Yai. This is my first attempt, and it kinda worked:

.guernsey {
background-image: url(http://islandmums.info/wp-content/uploads/2016/07/header-guernsey-offers-1.png);
background-position: center top;
background-repeat: no-repeat;

}
.guernsey {
padding-top: 180px !important;}

This has placed my image where I want it to go. I am so proud, don’t laugh 🙂

You can see example here:

http://islandmums.info/guernsey/gspca-birthday-parties/

I have just one question is there a way to make it scale properly & responsively, as I resize the window its getting cropped, and looks a bit grainy like it has been stretched a bit even though I have a high quality .png image.

I yet have much to learn about media queries… and maybe I am going the wrong way about it completely?

Any suggestions will be very much appreciated. Thank you!

[Nabeel A]

Hi there,

Thanks for writing in! Try replacing your code with this:

.guernsey {
    background-image: url(http://islandmums.info/wp-content/uploads/2016/07/header-guernsey-offers-1.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
}

Let us know how this goes!

[islandmums]

Thats what I wanted, Thank you!

Can I ask is there a way to hide this image AND the padding I added to allow for it on screens less than 920px wide? Even though it looks great on desktop, on small screens that 180px padding is a bit much and the image is not that readable 🙂 see screenshot.

And while I am here, is there a way of hiding my header background image on screens less than 920px too? I added it in using this CSS that I found on one of the questions/answers on here:

.x-navbar {
background-color: transparent ;
background-image: url(http://islandmums.info/wp-content/uploads/2016/07/Islandmums-guernsey-header-a.png);
background-position: center top;
background-repeat: repeat-x;
}

Thank you as always for awesome support! x

[Thai]

Hi There,

Please add the following CSS:

@media (max-width: 920px){
    .guernsey,
    .x-navbar {
        background-image: none;
        padding-top: 0 !important;
    }
    .x-navbar-inner {
        min-height: auto
    }
}

Let us know how it goes!

[Author]

Posts