using css to set an image as background wallpaper

  • Unknown's avatar
    geraniumthemusical · Member ·

    using the Academica theme I am trying to set an image as background wallpaper on the home page only. Support says I can do it using custom css

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, yes, we can do this. If you have not already, upload the image to your media library and get the URL of that image. Then go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS. 

    body.home.custom-background {
    background: url("URL_OF_IMAGE") no-repeat scroll center top /cover;
}

    You will then replace URL_OF_IMAGE between the quote marks with the URL of your image. I’ve set this up so that it will “contain” the image within the width and/or height of the page, and also for it to not repeat. Given that I don’t know what size and what the image looks like that you wish to use, this is just sort of a starter guess on things. Once you get the image on the site we can make adjustments to get things to look right.

  • Unknown's avatar
    geraniumthemusical · Member ·

    https://pensaracademydotorg.wordpress.com/ is the site, I loaded the custom ccs you sent but the image does does not fit on the page, to large. The image I am try to use is on the home page, top right next to the logo. Many thanks for your help. What next ?…..Dave

  • Unknown's avatar
    thesacredpath · Member ·

    The one of the boy working on the robot? That image is only 457px x 421px, which is way too small. Typically you will want an image that is 1000px wide or it will lose quality, and with one that small it will lose a lot of quality and become very pixelated.

    Also, due to the nature of that image, the bulk of it will be hidden behind the content area, so it would not be a good one to use as a background image. The Second one on the left would be better due to it being taller (portrait orientation), but again, it is way too small. If you have originals of the images, that are around 1000px wide, then you can upload one of those to use.

    Also looking in your customizer, there are a few important bits you left out of the code. This would be the code needed, and then you can replace just the URL of the image. 

    body.home.custom-background {
	background: url("https://pensaracademydotorg.files.wordpress.com/2016/02/pensarimage4.jpg") no-repeat scroll center top /cover;
}
  • Unknown's avatar
    geraniumthemusical · Member ·

    many thanks for your assistance. I did find this education theme. Might work for our needs any experience with it? http://themeforest.net/item/education-wordpress-theme-education-wp/14058034

  • Unknown's avatar
    thesacredpath · Member ·

    To use that theme, you would have to self-host your own installation of WordPress on a different web host since we cannot use or upload themes from outside of WordPress.com. Themes here have to be modified to support all the unique features we have here.

    We can choose from the 375 themes listed in our Theme Showcase.

  • The topic ‘using css to set an image as background wallpaper’ is closed to new replies.