How to add image (gradient) to footer and widget background in Visual theme Blog

• 

  ovnigraphic · Member · Apr 2, 2014 at 3:42 am

  • Copy link
  • Add topic to favorites

  HI
  How to add image (gradient) to footer and widget background in Visual theme Blog I need help with is http://ovnigraphic.com
  Thank you

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

• 

  ovnigraphic · Member · Apr 2, 2014 at 4:16 am

  • Copy link

  hi
  for the footer i came up with an image of 1250 X 180 with this code…
  .site-footer {
  background: url(http://ovnigraphic.files.wordpress.com/2014/04/footer4.png)
  }
  Still I seem to have image placement problem, I tried to change image size Only the top part is displayed….
  for the widget i’m trying, but nothing….

  Thank you

• 

  ovnigraphic · Member · Apr 2, 2014 at 4:24 am

  • Copy link

  Hi
  I think I got it too for the widget with this code
  .widget {
  background: url(http://ovnigraphic.files.wordpress.com/2014/04/widget.png)
  }
  Still, I have the same kind of problem, How could i make the image to fit the size of every widget without cropping it or reproducing it ? Am I clear ?
  I would also need to change the font color for footer and widget…
  Thank you

• 

  shawnajroberts · Member · Apr 2, 2014 at 10:36 pm

  • Copy link

  Hi there!

  I just took a look at your site and it looks like you got these working! Are you still having trouble with the resizing?

  Let me know what I can do to help!

• 

  ovnigraphic · Member · Apr 3, 2014 at 12:21 am

  • Copy link

  Hi,
  Thank you, sorry I didn’t post… Yeeessss finally I went through it last night… (I’m in Asia time)…. I guess my coding is not very clean but it’s working….
  But now I have something else that for sure I can’t solve….
  -If you look at my page, I still have a kind of black and grey outline around the post area…. How could I get it out ?
  -When I look at the tablet and mobile version, the banner is deformed, get narrower but not less high. Is there a way to solve this ? Like making it responsive to the size of screen ?
  -Up to now this what I’ve done with it….
  Use CSS coding for the green gradient background and resize it this way :

  .site-header img {
  height: 129;
  }

  .site-header {
  background: url(http://ovnigraphic.files.wordpress.com/2014/04/footer4.png)
  }

  .site-header {
  height: 129;
  }

  .site-header img {
  margin-top: 0;
  }

  Then I add a transparent image through the regular way…

• 

  shawnajroberts · Member · Apr 3, 2014 at 2:18 pm

  • Copy link

  That’s great! Responsive CSS code is a little bit more in depth than I can help with, but here are great resources:

  Media Queries for Standard Devices

  Responsive Design with CSS3 Media Queries

  And I’m sure the folks over the in CSS forums would be happy to help further!

  https://en.forums.wordpress.com/forum/css-customization

  Let me know if there’s anything else I can help with!

• 

  ovnigraphic · Member · Apr 4, 2014 at 12:27 am

  • Copy link

  thank you, I’ll do that