Hi, maybe someone can please point me in the right direction here…?
I currently have a background image [fixed width content in full width row] with Heading, Text Box and Button contents all centered over the image. Here:
The amount of gymnastics that i’ve been through for to keep all the text centered has been, well, a journey.
Before I start again could anyone please suggest the/a best way to move forward so that the 3 text elements [Heading, Text, Button] always stay centered in the image?
Am I always going to have to dink around with endless media queries or, shall I just call it a day and ‘Shop up’ the Text in the Image. I know I lose Google Juice through 'Shopping ‘er up’ but the media queries do look good when they are - ALL - implemented!
To keep your text central on an image such as a laptop, tablet etc… would be much simpler to with the text in the image.
The only alternative is to use media queries when the image is something specific like a tablet, computer etc… where you want to have the text centered on the screen. As the image is going to be resized based on the screen size. That is where your issue is coming from.
If this was a standard image such as a scenery it wouldn’t be that much of an issue.
Or, you could make use the built-in BB functionality to only display the row at certain screen sizes, found under the Advanced tab > Responsive Layout > Display.
create two additional copies of your existing row with the laptop image
on the original, set the row to Display > Large Devices Only
on the first row copy, set the row to Display > Medium Devices Only
on the first row copy, set the row to Display > Small Devices Only
Then for each of the two copies, adjust the image and text size to suit. I tried this on a local test site using your image and text and found that it works better if you create and use the laptop images that have been re-sized first in a graphics app. You’ll also need to tweak the various margin and padding values.
and disappeared the middle text row with ‘display large only’
I guess I am just amazed at how much labor is involved with achieving what I want. I’m glad I’m not my own client!!
and yes, padding, margins, font-size, responsive display:hidden, PShopping the images and, no doubt, more. It just shouldn’t be that complex for a centered background image with text overlay. Should it?
That’s kinda why I thought just PShopping the one image - inclusive of text - might be mo’ beddah.
Thanks for the input Lyle. I’ll see where I go…
@danny
Not sure what you meant by: “…would be much simpler to with the text in the image…”
I’m guessing you meant PShop the text onto the image?
You can also set the size of the heading to use a relative unit instead of an absolute unit through custom CSS. You’ll still have to play around with the value though. Try applying the relative unit when the viewport starts shrinking the background image.
