Opti Theme Header

• 

  craigdent · Member · Jun 10, 2016 at 12:40 am

  • Copy link
  • Add topic to favorites

  Hi – hopeful that someone can assist with a Opti Theme challenge.

  I have been trying to get an image to sit under the site title text on my site rather than the “header” option offered by the theme which drops the image below the site title text.

  Any ideas?

  Thanks in advance

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

• 

  thesacredpath · Member · Jun 10, 2016 at 4:35 pm

  • Copy link

  Hi there, if you have uploaded the image, can you give me a link to it, and can you also verify you want it between the site title and the description/tagline, or do you want it below all of it?

• 

  craigdent · Member · Jun 12, 2016 at 12:11 am

  • Copy link

  Hi – thanks so much for your help. This one has me stumped.

  The image is at https://craigdent.files.wordpress.com/2015/06/cropped-st_craigdent_twitterprofile_v3.jpg

  I would like the image to occupy the current grey space which sits under the white text for the site title. Given your experience, do you think it would sit better somewhere else?

• 

  davesblog54 · Member · Jun 12, 2016 at 4:12 pm

  • Copy link

  Something like this may work if you have the CSS upgrade available.

  #masthead {
      background-image:     url(https://craigdent.files.wordpress.com/2015/06/cropped-st_craigdent_twitterprofile_v3.jpg);
      background-position: center;
  }

  You can position it the way you want it by adjusting background-posistion.

• 

  craigdent · Member · Jun 13, 2016 at 6:28 am

  • Copy link

  I have the CSS editor available, I placed this in and nothing happened?

• 

  supernovia · Staff · Jun 13, 2016 at 11:08 pm

  • Copy link

  @craigdent can you try saving the changes? I don’t see them in there right now. Once that’s done we can troubleshoot.

• 

  craigdent · Member · Jun 13, 2016 at 11:15 pm

  • Copy link

  Hi – all saved

• 

  supernovia · Staff · Jun 14, 2016 at 12:26 am

  • Copy link

  @craigdent hmm, it looks like something is overriding that. I tested it out and got the image to show like this:

  #masthead {
      background-image:     url(https://craigdent.files.wordpress.com/2015/06/cropped-st_craigdent_twitterprofile_v3.jpg);

  You might also try something along these lines instead:

  #masthead {
      background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('https://craigdent.files.wordpress.com/2015/06/cropped-st_craigdent_twitterprofile_v3.jpg') !important;
      background-position: center;
  }
  
  #branding { padding: 260px 0 10px }

• 

  craigdent · Member · Jun 14, 2016 at 4:17 am

  • Copy link

  Thanks so much, thats a massive improvement.

  One quick question, how do I have the image not repeat to the right? There are 3 tiles in the one image, however, its appearing to repeat premised on screen size?

• 

  supernovia · Staff · Jun 14, 2016 at 9:30 pm

  • Copy link

  #masthead {
          background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('https://craigdent.files.wordpress.com/2015/06/cropped-st_craigdent_twitterprofile_v3.jpg') center no-repeat #333 !important;
  }
  
  #branding { padding: 260px 0 10px }

  You can adjust the #333 too; that’s just a base color to fill in on the sides. Note it will be covered by the linear-gradient (used to darken the picture so you can still see the text.)

• 

  craigdent · Member · Jun 14, 2016 at 10:23 pm

  • Copy link

  Thank you so very much – I have tried to achieve this for quite a long time and you have been able to resolve the issues.

  Fantastic support, thank you

• 

  supernovia · Staff · Jun 15, 2016 at 12:29 am

  • Copy link

  Cheers @craigdent :)

• 

  supernovia · Staff · Jun 15, 2016 at 12:30 am

  • Copy link

  Oh! I just noticed I had a typo in my CSS. I’ve fixed it if you want to use that instead.

• 

  craigdent · Member · Jun 15, 2016 at 12:42 am

  • Copy link

  Just so I don’t get it wrong, can you repost the correct version, I will then copy across?
  Thanks

• 

  supernovia · Staff · Jun 15, 2016 at 2:13 am

  • Copy link

  Yup:

  #masthead {
          background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('https://craigdent.files.wordpress.com/2015/06/cropped-st_craigdent_twitterprofile_v3.jpg') center no-repeat #333 !important;
  }
  
  #branding {
          padding: 260px 0 10px
  }

  Cheers!

• 

  craigdent · Member · Jun 15, 2016 at 2:17 am

  • Copy link

  Thanks