-
Posts
-
Hi,
I have a background image and there is a special area in that image on which I want my text appears. There are 3 columns and this one is in the middle. Please look at the picture.
http://i.hizliresim.com/VLbOPP.jpg
1-) For full size width page view, there seems to be no problem about the text view except there is a cut ( a-cut ) on the top of the background image.
2-) When I decrease the width of the page more, the background image is being cut from the bottom and text is now like pressed horizontally.
3-) The text is out of proportion and there is a cut ( d-cut ) on left and right side of the background image.
4-) For smart phones it is perfect. Interesting. Look at the image number 4. It is really annoying to view this without any problem in just phone specific size.
Is there a way to fix the column width and height so the text will be inside the frame. May be the text width should be fixed. But the cuts the background image encounters is also the problem.
Do you have any idea how to solve this because using specific background and text over it is really essential for the designers.
Awaiting Your Reply
Best RegardsHi ilkbaharkunduzu!
your screenshot does not show up, please use imgur.com or dropbox instead. Send us a link showing what you are talking about, so we can inspect the elements.
Best regards,
AndyAndy, thank you for the warning and sorry about that. Uploaded again.
Hey!
How did you add the background? We need to see the actual page so that we can inspect the elements. I think the issue is that the columns are responsive but the background is not.
Cheers!
IsmaelHi,
Thank you for the answer. 3 columns. One in the middle has a background image added inside the “Colors” tab of that column. That’s it. First one has equal height or individual height option ( tried both ) . It does not matter what you choose, the text over the background image is problematic. The same result.
I created an admin account as it is needed.
Note: Ismael, the site is closed to public. In order to change the theme ( Abundance to Enfold), this temporary domain and server have been chosen. You should actually login to see the page. My developer set up Lock Out plugin.
Awaiting Your Reply
Best RegardsHi!
I can’t access your site, it says “SS Offline”. Could you check please and let us know?
Regards,
AndyHi Andy,
You cannot access it. It is closed. I have written that. You should login via wp-admin then you can see the pages. There is a lockout plugin. This site is the duplication of my live site ( especially woo commerce products ) . After all adjustments, we will migrate it to the original server. That’s why it is closed to public and google.
Or is it the login problem?
Hi!
The background image have a fixed dimension and is not responsive. Basically, the text and the background inside the column have no connection in terms of responsiveness. The background image is not going to wrap around the texts. Unfortunately, this layout is not going to work the way you expected it. You can try to add a background via the Quick CSS field, try this:
.flex_column.av_one_third { background-color: rgba(255,255,255,.6); border: 2px solid violet; border-radius: 10px !important; }OR you can set the background size property to 100% but it will stretch the background image:
.flex_column.av_one_third { background-size: 100% 100% !important; }I think you should look for another design. This layout is only going to work if the character count inside the box is limited.
Best regards,
IsmaelHi Ismael,
When you create an object in illustrator, you put a text inside it and calculate the character count or simply manipulate the vectorial design ( background image ) vertically to make the text fit inside based on the specific text size you will choose on the page. When you change the text or add a paragraph in the future, you can always edit the object inside illustrator and change the background image by replacing the old vectorial image. It is actually 1 minute work. So the text here does not come from an XML file. It is simply static or limited of course.
Thank you for your answer. May be in the future text position specific background image feature comes up. Until then I have to consider another design alternatives.
Best Regards
Hey!
Another solution is to hide the background on specific screen sizes. You can use css media queries in order to accomplish that. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Regards,
Ismael
- You must be logged in to reply to this topic.