Backgrounds and linked text - Page 1

User 458539 Photo


Registered User
1,583 posts

Hello Forum,

I know I'm doing something nuts here but don't understand why its not workling

Looking to make a column background thats a image and superimpose a phone link and email link over the corner. I setup an experiment in RLM (rough layout and pic just trying to figure this out):

http://tippingproductions.com/tpc/demosite9/

I got the image in the background but have lost the text links. I realize that I modified the main css and thats probably ano-no but its all that I could figure it out this far.

Thanks in advance

Byron
User 38401 Photo


Senior Advisor
10,951 posts

Looks to me like you not only edited the main.css but deleted 99% of it? You can't do that and expect your site to work correctly. In order to edit anything that is in the main.css file you need to create a custom.css file and copy the code from your main.css file that you want to change and paste it into the custom.css file. If you take code from a sizing area you need to make sure you copy the relevant media code setup as well so that the settings are read correctly.

Right now your site is nothing but an image, try exporting your site and putting it online as it is without deleting all the code and see if they show up then. If so, do what I say above and edit your code that way, the rest of the code in the main.css file is there for a reason :P
User 458539 Photo


Registered User
1,583 posts

Its just an experiment site now - All I did was a single row with column breaks.

Didn't change anything but the background of the column
User 458539 Photo


Registered User
1,583 posts

Why doesn't the copy show over the top right of the picture?
User 2484360 Photo


Registered User
3,293 posts

Byron Tipping wrote:
Why doesn't the copy show over the top right of the picture?


Hey Byron,

First you are not placing the image in the background of the column, it is an actual image placed inside the column itself. You would need to apply the image to the background of the column in the CSS to see the phone number.

This will fix most of your issues and then we can move on from there. :P
User 458539 Photo


Registered User
1,583 posts

Thanks

Not surprisingly - I don't get it

Here is what I placed in the main css

body > .row > [class*='coffee-span-'].column-1 {
background-image: url(img src=../images/test.png);

Doesn't that tell it background?
User 2484360 Photo


Registered User
3,293 posts

Byron Tipping wrote:
Thanks

Not surprisingly - I don't get it

Here is what I placed in the main css

body > .row > [class*='coffee-span-'].column-1 {
background-image: url(img src=../images/test.png);

Doesn't that tell it background?


What I see is this:

<div class="coffee-span-12 column-1">
<div class="subgrid">
<div class="row">
<img src="images/test.png" width="1100" height="666" alt="" border="0">
<div class="coffee-span-2"></div>
<div class="coffee-span-4">
<a class="link-text topphone" href="#">11111111111</a>
<a class="link-text topemail" href="#">11111111111</a>
</div>
</div>
</div>
</div>


I am getting this code from http://tippingproductions.com/tpc/demosite9/ is that the correct site?
User 458539 Photo


Registered User
1,583 posts

Yes that is the correct site -

I see the index file code - the main css is the code I pasted previous.
User 2484360 Photo


Registered User
3,293 posts

Byron Tipping wrote:
Yes that is the correct site -

I see the index file code - the main css is the code I pasted previous.


You have to remove the image from the column and place it in the CSS. The correct code is:

background-image: url(../images/test.png);


But I also recommend putting this in a custom.css file rather then editing the main CSS file. :P
User 458539 Photo


Registered User
1,583 posts

Adam

IT worked but only the top small small of the pic, and I didn't slice the photo. I did put a no repeat in the background as it was tiling.

How do I make the whole picture show

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.