Responsive image in site branding

  • Hello there,

    I have changed the background in site-branding on my child theme for Twenty-fifteen. I used this code

    .site-branding {
    background: url(‘https://islet.dk/neptun/wp-content/uploads/2015/01/neptun_logo.png’) 0 0 no-repeat;
    width: 244px;
    height: 244px;
    }

    and it works fine. I had to change the button secondary-toggle using
    .secondary-toggle {
    top: 10%;
    left:100%;
    }
    to place the button outside the image, on smaller screens. And I like the look of it there.

    However, if I could make the background

    – link to the frontpage on click
    – responsive

    I would be very, very happy.

    I know it’s not responsive because I use width and height, but it’s the only way I can make the image show.

    Regards,

Viewing 2 replies - 1 through 2 (of 2 total)

  • Thanks for the code! It got me started. I eventually found it worked better to put the background image in .site-title. The result is responsive but not clickable. Note that I am REPLACING the site title with a logo image, so I use display: none to remove the site title. Here’s my CSS.

    .site-title {
    background-image: url("https://***your-image-here***.png");
    background-position: center top;
    background-repeat: no-repeat;
    width: 255px;
    height: 120px;
    position: absolute;
    top: -15px;
    left: 0px;
    }

    .site-title a {
    display: none;
    }

    #masthead {
    min-height: 125px;
    padding: 15px 67px 0 0;
    }

    katarinamh, why not use a percentage instead of a fixed pixel size? then it is responsive.
    I’d try adding background-image:on-click url(“your url here”); to make it clickable

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Responsive image in site branding’ is closed to new replies.