add picture behind widgets

• 

  examplemanu · Member · Nov 30, 2016 at 4:43 pm

  • Copy link
  • Add topic to favorites

  “Hi there! This is for https://paroissemontaigulabruffiere.com/.
  I would like to have a background image in the widgets area on the welcome page (https://paroissemontaigulabruffiere.com/). I would like this area of my website to have the background image https://paroissemontaigu.files.wordpress.com/2016/11/jubilc3a9-2.png. Would someone mind helping me with this code? Thank you!”

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

• 

  melindahelt · Staff · Dec 1, 2016 at 4:18 am

  • Copy link

  Hello

  I can help you with this. Could you confirm which widget area you’d like to use the image on?

  Are you talking about the LIENS FAVORIS DES PAROISSES section, or the section above with the 5 different images.

  I’ll be glad to help you place the background image via css, but the image itself is rather busy and it will be hard to see in the background of either of those spaces.

• 

  examplemanu · Member · Dec 1, 2016 at 9:30 am

  • Copy link

  Thank you very much.
  It is the area with the 5 different images (I suppressed the LIEN FAVORIS DES PAROISSES section

  I will maybe change the background image if it is not so nice with this picture. I will see on your code where to change the picture.

  Thanks
  Emmanuel

• 

  examplemanu · Member · Dec 1, 2016 at 10:02 am

  • Copy link

  And I need to change the color of the title of the pictures (in white) to be seen with the background image.
  Thank you very much
  Emmanuel

• 

  melindahelt · Staff · Dec 6, 2016 at 8:39 pm

  • Copy link

  Hi

  It looks like you were able to figure out the background image and the title color.

  Let me know if you need anything else.

• 

  examplemanu · Member · Dec 7, 2016 at 2:08 pm

  • Copy link

  Thanks!
  In fact still not perfect: the mobile format of the website is buggy …
  The picture is also in the text…
  Maybe I have to use other code I used for the backgound image .site or .site-content for the background picture of the widget area.
  .widget-area did not give nice results too…

  Thanks for your help!

• 

  examplemanu · Member · Dec 8, 2016 at 3:38 pm

  • Copy link

  In fact I used css code to suppress the background image on phone, replace it by background-color
  
  @media screen and (max-width: 480px) {
  .site { background: none;
  background-color: #FAFAD2;}
  }

  @media screen and (max-width: 480px) {
  .site-content { background-color: #FAFAD2;}
  }

  @media screen and (max-width: 480px) {
  .widget-title {
  color: black !important;
  border-width: 2px;
  border-style: solid;
  border-color: black;
  }
  }