How to add a small image to Ampersand home page header?

  • Unknown's avatar
    joeshirley · Member ·

    Hi!

    This might be a question more for staff right now, as my site is still Private until I get more relevant content in place. But I figured it wouldn’t hurt to post.

    On the home page header, I would like to add a small (~200px) image to the right side, and have the title and subtitle text wrap to avoid the image. Someone suggested I use background-image to do it, and this is what I came up with:

    div.hero-title {
	background-image:url ('http://whyfeelingmatters.files.wordpress.com/2014/02/josephshirley_springcheng.jpg');
	background-size:160px 160px;
	background-position:right;
	margin-right: 40%;
}

    The margin rule is working fine, so the designator seems OK. But the image is not showing up at all. Here’s the Ampersand theme.

    Any suggestions?

    Thanks!!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    joeshirley · Member ·

    While I’m at it, I guess I need to ask about another element here. How can I set the h2 headline on the home page to be smaller than the header on all the other pages? I like the large size throughout the site, but with a longer subhead and image, (I’m anticipating being able to figure that part out), it looks better smaller.

    Currently, I’ve tried setting the .hero-title h2 font-size, but that changes all the pages. Can’t figure out how to limit the effect to the home page only.

    Ideas?

    Thanks!!

  • Unknown's avatar
    joeshirley · Member ·

    So I got an answer from okaythemes theme author over in the Ampersand support forum.

    Here’s what he said:

    Looks like you had a small typo in your background URL CSS. There was a space between url and the opening bracket.

    I’ve gone ahead and tweaked your CSS a bit to accommodate your image:

    div.hero-title {
	background: url('http://whyfeelingmatters.files.wordpress.com/2014/02/josephshirley_springcheng.jpg') no-repeat right 10px;
	background-size: 150px 150px;
	padding-right: 26%;
}

    To target the homepage headline h2, you can utilize the ‘home’ class that the <body> tag gets on the homepage.

    .home .hero-title h2 {
font-size: 40px;
}

    That will only change the styles for the homepage titles. Hope that helps!

    Thought someone else might find that helpful.

  • The topic ‘How to add a small image to Ampersand home page header?’ is closed to new replies.