Image background for content area on home page only

Community Forums Forums Design Tips and Tricks Image background for content area on home page only

This topic is: not resolved

This topic contains 13 replies, has 2 voices, and was last updated by  krystyn 8 months, 2 weeks ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #78059

    krystyn
    Participant
    Post count: 148

    I’d like to put an image in the background of the home page’s content area…only on the home page. I’m using the genesis featured amplified widget to create the content on the home page if that makes a difference.

    I’m using the streamline child theme…and the site is in development mode so I can’t share the link.

    I can’t think of a hook to use to only display it on the home page…or would I just need to do a background in css for the homepage (again, not really a “HOME” page, just generated using the featured amplified widget).

    #78118

    nutsandbolts
    Moderator
    Post count: 3125

    I would use CSS to put a background on the homepage only. Something like #home .content should do it.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #78224

    krystyn
    Participant
    Post count: 148

    Thanks…I’ll have to convert from html5….but I get the basic idea!

    #78403

    krystyn
    Participant
    Post count: 148

    @nutsandbolts if there isn’t a #home in the css, besides just adding it

    #home .content-sidebar #inner .wrap {

    }

    Is there anything else I need to do? With the background image there, it’s no longer showing.

    When I had it here, it was placed in the correct spot, but it just shows on all posts and pages including home.

    .content-sidebar #inner .wrap {

    background: url(“http://url.com/background”) no-repeat scroll 0 0 #ffffff;

    #78404

    nutsandbolts
    Moderator
    Post count: 3125

    You can add it – that’s no problem. Worst case scenario, it won’t work and we’ll have to try something else.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #78405

    krystyn
    Participant
    Post count: 148

    @Nutsandbolts…yeah, I added it, and it’s not showing at all now…..hmmmmm

    #78409

    krystyn
    Participant
    Post count: 148

    Whoops…tag didn’t work.

    @nutsandbolts …yeah, I added it, and it’s not showing at all now…..hmmmmm

    #78584

    krystyn
    Participant
    Post count: 148

    Anybody else have any ideas? I’m not using a “home” page if that helps. The home page has widgets to pull posts from different categories.

    #78585

    nutsandbolts
    Moderator
    Post count: 3125

    Have you tried .home instead of #home? Sometimes that makes the difference.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #78586

    krystyn
    Participant
    Post count: 148

    @nutsandbolts

    Yes, I tried

    #home .content-sidebar #inner .wrap {
    background: url(“http://url.com/background”) no-repeat scroll 0 0 #ffffff;
    }

    and

    .home .content-sidebar #inner .wrap {
    background: url(“http://url.com/background”) no-repeat scroll 0 0 #ffffff;
    }

    and even

    .home.content-sidebar #inner .wrap {
    background: url(“http://url.com/background”) no-repeat scroll 0 0 #ffffff;
    }

    I’m puzzled as I thought for sure one of them would work?

    #78587

    nutsandbolts
    Moderator
    Post count: 3125

    Are you able to post a link to the site? I’d love to take a look and see if we can figure out why it’s being stubborn.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #78589

    krystyn
    Participant
    Post count: 148

    @nutsandbolts

    Here’s a link…I took off the coming soon for a bit: http://gigalaw.net

    Also, it’s the picture on the left (full body)…I added it back in so you can see where it goes, but I only want it on the home page….then I will work on the css spacing so it only bumps things over on the home page and not posts, etc.

    http://gigalaw.net

    Thanks.

    #78592

    nutsandbolts
    Moderator
    Post count: 3125

    I think this one will work – it works in Chrome’s Inspector, anyway:

    .home #content-sidebar-wrap { 
    background: url("http://gigalaw.net/wp-content/uploads/2013/12/doug-full-body-crop4001.png") no-repeat scroll 0 0 #ffffff;
    }

    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #78593

    krystyn
    Participant
    Post count: 148

    Perfect @nutsandbolts !

    Thank you!

    Off to get spacing right now for home and other pages.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.