Opti Theme Header
-
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)
-
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?
-
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?
-
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 can you try saving the changes? I don’t see them in there right now. Once that’s done we can troubleshoot.
-
-
@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 } -
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?
-
#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.)
-
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
-
-
Oh! I just noticed I had a typo in my CSS. I’ve fixed it if you want to use that instead.
-
Just so I don’t get it wrong, can you repost the correct version, I will then copy across?
Thanks -
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!
-
- The topic ‘Opti Theme Header’ is closed to new replies.