CSS Help, setting a translucent background image.

• 

  ukjellyfish · Member · Nov 18, 2014 at 9:04 pm

  • Copy link
  • Add topic to favorites

  Hi.

  I’m using the Intergalactic Theme and need help customizing this page:jellyfish page. I would like the Featured Image to show up like a wallpaper on that page, in the same translucent effect it has on the home page. I have the CSS Custom design upgrade and just need the code.

  Also how do i export the image to become a code that will fit into CSS?

  Thank you!

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

• 

  designsimply · Member · Nov 19, 2014 at 4:12 pm

  • Copy link

  This will take a little work to set up.

  I checked http://ukjellyfish.wordpress.com/ and I see that it is currently using this jellyfish image: http://ukjellyfish.files.wordpress.com/2014/11/cropped-pink_jellyfish-wallpaper-1280×800.jpg

  The translucent effect is accomplished with the opacity property:
  https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

  opacity: .3;

  To use that same jellyfish image on this page: http://ukjellyfish.wordpress.com/jellyfish-3/

  You can set it up as a background image on one of the container elements.

  To find out what HTML elements a page has, the best way is to use “Inspect Element” option to get to your browser tools. Here is a guide:
  http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  I checked the jellyfish page, and I found that it has a body class of “page-id-25” so you can use that to apply a few changes just to that page. I made an example for you that applies the same image that is currently used on the front page in the background of the header on the jellyfish page.

  .page-id-25 .entry-header {
  	background: #222;
  }
  
  .page-id-25 .entry-title {
  	background: url(http://ukjellyfish.files.wordpress.com/2014/11/cropped-pink_jellyfish-wallpaper-1280x800.jpg?w=1440) 25% 75%;
  	opacity: 0.3;
  	padding: 2em 0;
  	width: 100%;
  }

  I increased the top and bottom padding on the title to 2em. You can adjust that number to whatever you like.

  To change the image from the one in the example above, upload an image that is large enough to the media library in your blog dashboard and copy the URL of the image. Then use that image URL in the url() field in the example above.

  Try adjusting all the numbers while you are editing to see what each one does.

• 

  ukjellyfish · Member · Nov 21, 2014 at 8:24 pm

  • Copy link

  Hi,

  Thanks so much! didn’t quite do what I expected but I’m happy with the result!

  Check out http://ukjellyfish.wordpress.com/jellyfish-3/ now to see what its like now! :)

  Really great though,

  Thanks!

• 

  designsimply · Member · Nov 22, 2014 at 2:54 pm

  • Copy link

  I like it! There’s a really nice blue in the middle.