Background Image On Homepage Only

  • Unknown's avatar
    miasedu · Member ·

    Hi everyone, I just got some troubles and I will so appreciate if anyone can help me with it:

    I would like to have the background image only on the homepage and not on other pages as well. Is this possible to make it with CSS ? I know nothing about CSS. Does anyone would like to help me with it? It will be a big help.

    And I just found a css code on this topic from @thesacredpath. However, it doesn’t match with my theme. My theme is Gateway.

    body.home {
    background: url(“URL OF IMAGE”) no-repeat scroll 0 0 transparent;
    }

    Hope someone can give me some instruction, Thank you so much!!

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

  • Unknown's avatar
    hallluke · Member ·

    You need to include the URL of the image you want to use between the quotes in the code given. If you already have an image loaded into your media library then go there and copy the URL. Then you can include the code and it will look something like this:

    body.home {
	background-image: url("http://placehold.it/200x200")
}
  • Unknown's avatar
    miasedu · Member ·

    @hallluke
    It works! Thank you so much! Silly me, Haha!

  • Unknown's avatar
    hallluke · Member ·

    That’s OK, it’s an easy thing to overlook, I’m glad you got it sorted.

    Remeber: a small, tiled image makes for an excellent background as the file size is small so it won’t load too slowly or use up lots of data for mobile users.

  • Unknown's avatar
    miasedu · Member ·

    @hallluke

    That’s right! I will try to find images with smaller size. Actually, the load time is not the only problem for mobile user. I realize that it’s hard to make images looks great in both laptop and mobile. For example, a huge wide image is beautiful on the full screen, but it can’t fit the mobile screen. Kinda tricky.

  • The topic ‘Background Image On Homepage Only’ is closed to new replies.