[Resolved] Transparent background to text box

[Larry Cunningham]

I would like the see the background image behind a text box without distorting the quality of the text. Are there easy steps to achieve this?

Thank you

[Tom]

Hi Larry,

I suppose it would just depend on the quality of the background image? Are you trying to create a transparent effect? If so, a 2×2 (px) image with opacity set to repeat will do the trick.

Let me know 🙂

[Larry Cunningham]

Hi Tom

Thank you replying so quickly. I have just started building my first website using WordPress (I have used WP to manage a site before) and can I say I am enjoying it and particularly using GeneratePress. The add-ons are very useful.

The site I am building can be seen at http://www.bathclassicalmusicians.co.uk/. What I am trying to achieve is to make the white background behind the text transparent so that the underlying background image shows through but keeping the text clear enough to be read. I read one of your other replies in this forum and I think it mentioned setting the background of the text to clear but I’m not sure where to go to do that.

Hope I’m not asking a very basic question.

Larry

[Tom]

Hi Larry,

Where are you setting that current background image? Using the add-on?

If so, try setting the size to “Cover”.

Let me know 🙂

[Larry Cunningham]

Hi Tom

Yes I set the background image via the add-on. I set it under Background Image – Content Heading. The settings are: No Repeat, Cover and Fixed. Changing it to cover didn’t make any difference to the block of white behind the text.

Larry

[Tom]

Can you try going to “Colors > Content Colors” and then simply remove the “Background” color?

That should do it 🙂

[Larry Cunningham]

Hi Tom

Thank you that worked a treat. Just a couple more questions. The content background image is set to fixed which shows the text scrolling over the background image perfectly on my laptop. However on my iPhone and iPad the background image doesn’t behave in the same way. This is a particular problem on pages that have long text – the background image is stretched so far as to become indistinguishable. Are there any settings in Generatepress that overcome this or is the fixed feature something that iPhones and iPads don’t like?

Finally I’m using P3 Plugin profiler to check that the plugins are all working well – it shows the Generate Background plugin taking 12.5 secs to load. The rest are all very low figures. The image I am using is 177kb. Any suggestions?

Thank you

Larry

[Tom]

Hi Larry,

Yea, phones don’t do fixed backgrounds – unfortunately there’s no way around it that I know of. You could hide the background image on phones and just use a solid color?

12.5 seconds!? Holy.. I’m definitely not seeing that – site loads in a couple seconds for me.

I used pingdom to take a look as well, and the site fully loaded in 3 seconds, most of which was “Waiting” which is server related.

That image definitely isn’t big, so I wouldn’t put too much weight into that 12.5 second result.

[Larry Cunningham]

Thanks Tom – you have been very helpful.

Larry

[Tom]

Glad I could help 🙂

[Author]

Posts